Spring is always the best time to look for a job, but this year the pandemic has turned job hunting into a crisis, so it’s important to keep your job. If you’re on your way to finding a job right now, this handmade and original interview will definitely help you.

Interview we must use concise condensed language to answer the interviewer, can’t talk a bunch of long winded, if you do not understand a certain interview questions, you can go to supplementary study search for more detailed answers.

As a front-end interviewer, I have interviewed numerous front-end developers, ranging from interns to Baidu T7.

Front End Basics

How to understand the execution context

JavaScript execution context refers mainly to the abstract concept of code execution environment. There are three execution contexts:

  • Global execution context
  • Function execution context
  • Eval Execution context

Each section of JS code execution will first create a context.

How to understand scope chains

Cutting edge: Context is created before js code is executed. This context contains variables, scope chains, and this.

The process of looking up variables from the current environment to the parent layer by layer is called scope chain.

var name = 'Front-end future';

function hello(){

  console.log(name);

}

Copy the code

When we print a name in the hello function, we first look it up in the Hello scope. If we don’t find it, we look it up in the parent scope of Hello.

How to understand prototype chains

Each function has a prototype property, and each function instance object has a __proto__ property, which refers to the function’s prototype property. When accessing an instance object’s property or method, we first look it up in the constructor. If not, __proto__ is used to look up the prototype, a process we call the prototype chain. (Sort of like scope chains)

// Define animal-parent class

function Animal(){

    this.age = 10;

    this.say = function(){

        return 'hello tom';

    }

}

// Define cat - subclass

function Cat(){

    this.name = 'tom';

}

// Inherit the animal class from the prototype

Cat.prototype = new Animal()

// instantiate a cat object

var cat = new Cat();

// Print returns true

cat.__proto__ === Cat.prototype

// Print age, look for cat, then look for Animal

console.log(cat.age)

Copy the code

From the screenshot, we can see that cat instance Object __proto__ refers to Animal. When cat does not have an age, __proto__ will be searched on the prototype. If the prototype still does not have an age, Object will be searched on the prototype.

What is a closure

It’s a function nested within a function. We all know that local variables are inaccessible, but closures do.

// Normal access

var lan = 'zh';

function hello(){

  var name = 'Front-end future';

}

console.log(name)// clear 'undefined'



// Switch to closures

function hello(){

    var name = 'Front-end future';

    return function demo(){

      console.log(name)// Print: front-end future

    }

}

Copy the code

These basic interview questions are closely related, understanding one of them, you can basically understand the rest of the several

What are the methods of inheritance

  • Prototype inheritance
  • Tectonic inheritance
  • Examples of inheritance
  • Call/Apply inheritance (combined inheritance)
  • ES6 uses class extends inheritance

What is deep/shallow copy and how is it implemented

JS data types are basic data types, which hold values, and reference data types, which hold reference addresses (this Pointers). Shallow copies share a reference address, and deep copies create new memory addresses.

Shallow copy method

  • Direct object copy
  • Object.assign

Deep copy

  • Json.stringify converts to a string and then json.parse
  • Deep recursive traversal

How do I know exactly if an object is an array

The interviewer wants to answer: Object. The prototype. ToString. Call ([]) returns “[Object Array]”

Extend the answer

  • []. Slice
  • [] instanceof Array
  • [].__proto__ === Array.prototype
  • Array.isarray ([]) has compatibility problems

Arrays are also reference types, and object is still returned via Typeof

What are the common methods of arrays

This is quite a lot to say quickly, but I’m mainly looking at how much you know, and also to bring up the next question,slice versus splice

  • Add at end of push
  • Delete end of pop
  • Shift header delete
  • Unshift header added
  • Concat array merge
  • Join Array elements are joined by a connector
  • Reverse Array reverse
  • Sort array sort
  • map/forEach/filter/indexOf/includes/slice/splice

Slice: slice(start,end) returns a new array without changing the original array.

Splice: delete. Splice (start,length,item) changes the array, removing multiple elements from a certain position, and inserting new elements.

What are the common apis for DOM node creation and modification

Create a node

  • createElement
  • createTextNode
  • CreateDocumentFragment (temporary node)

Modify the node

  • appendChild parent.appendChild(child)
  • insertBefore parentNode.insertBefore(newNode,refNode);
  • removeChild parent.removeChild(node)
  • replaceChild

What are the methods of clearing floating in the CSS

  • The parent element sets the height and is manually spread
  • Add an empty tag to the end of the float element and set clear:both
  • The parent element sets Overflow: Hidden
  • The parent element adds pseudo-classes :after and zoom

CSS selector priority

! Import > Inline Style (style) > ID selector > Class/Attribute/pseudo-class > Element/relationship

CSS implements a three-column layout (fixed width left and right, adaptive middle)

  • CSS float

The first float:left, the second float:right, the third set margin-left and margin-right

  • Absolute positioning method

The first location is left, the second location is right, and the third location is margin-left and margin-right

  • Flex layout
.left{

  width:200px;

or

  flex:0 0 200px;

}

.right{

  width:200px;

or

  flex:0 0 200px;

}

.center{

  flex:1;

}

Copy the code
  • Ali Grail layout (ignored)

Talk about flex layout

Flex is an elastic layout that contains flex-Container and Flex-Item.

Common attributes include flex-direction, flex-wrap, context-content, and align-items

Center horizontally -content:center horizontally -content:space-between vertically centered align-items:center

Talk about box models

Box model including the content, padding, border, margin

Box model is divided into IE box model and standard W3C box model

IE box width includes padding and border, w3c box width is the content width.

What’s the difference between transition and animation

Although both of them can produce animation effects, transition mainly provides simple transition effects, while animation provides complex animation effects. There are great differences in syntax and usage.

H5 adaptive scheme

H5 adaptive scheme you can find a lot in network speed, I personally recommend a method I like very much, is REM. Rem is a relative unit, it is based on HTML font size value to adjust.

Usually we use 750 as the base, we will nest a JS script in the header to get the resolution size of the mobile web page divided by 375, for ease of calculation, we assume 1rem = 100px at 750 pixels; So when we divide by 375 we have to multiply by 50.

Call /apply/bind functions and differences

They can both change the scope of the function.

  • Call /apply executes this function directly; bind does not
  • Call /apply functions are similar in that they can change Pointers and execute functions. The difference is that call requires a single parameter to be passed, while Apply passes an array of parameters

The difference between observer and publication subscriber

They both belong to the observer pattern, but have different implementations. Publish subscriptions have one more dispatch center than observers through which publishers publish messages to subscribers. In the observer mode, the target and the observer depend on each other. The observer subscribes to the target topic and notifies the corresponding observer when the target changes.

We can refer to my other public number article.

The browser parses the rendering process


  • Parsing HTML to generate a DOM tree
  • The CSS is parsed to generate the CSSOM tree
  • Associate THE DOM Tree with the CSSOM Tree to generate the Render Tree
  • Render tree (Layout/reflow), responsible for each element size, location calculation
  • Render the Render tree (paint), which draws the page pixel information
  • Send the pixels to the GPU and display them on the page. (Display)

Talk about the EventLoop

There are a few concepts you need to understand: call stack, synchronous/asynchronous task, macro/micro task

JavaScript itself is single-threaded, that is, it can only do one thing at a time. JS tasks include synchronous tasks and asynchronous tasks. When an execution function is encountered, it will be put into the call stack (advanced and back out); when an asynchronous task such as setTimeout/setInterval is encountered, it will be put into the message queue. When the tasks of the main thread are completed, the asynchronous tasks in the message queue are returned to be executed. If there are still asynchronous tasks in the asynchronous task, the asynchronous tasks will continue to be put into the message queue, and so on, forming an event loop.

Asynchronous tasks:

  • setTimeout
  • setInterval

Asynchronous tasks are divided into macro tasks and micro tasks, and promise is a micro task.

What’s the difference between GET and POST

  • size
    • GET transmission is generally 2K-8K, IE limit 2K, and POST has no size limit
  • security
    • A GET is transmitted through a URL in plaintext, and a POST is transmitted through a body, both of which are inherently insecure because HTTP is transmitted in plaintext.
  • Browser record
    • GET requests are logged by the browser, POST requests are not
  • Browser Back
    • GET does no harm, POST will submit again
  • Browser favorites
    • GET is favorites, POST is not
  • Browser cache
    • GET can be cached, POST can’t
  • encoding
    • GET is encoded by URL, and POST supports multiple encodings
  • TCP packet
    • GET generates one packet and POST generates two packets
  • Mode of use (customary)
    • GET pulls data, and POST submits and saves data

Talk about anti-shake and throttling

Both anti-shake and throttling are intended not to trigger requests repeatedly at the same time. Common scenarios are used in search and web scrolling events.

The difference between:

The anti-shake function is triggered only once in the specified time. If it is called again, the time will be recalculated.

Throttling is mainly triggered only once for a fixed period of time. Like every second.

How to deduplicate an array

  • ES6 Set to heavy
  • Use the Object key to remove weight
  • The two layers are looping over each other to generate a new array
  • IndexOf to heavy
  • Sort, then single layer loop before and after comparison

How to sort an array

  • Array sort
  • Bubble sort (two loops, two interchangeable)
// Bubble sort

function bubbleSort (data) {

    var temp = 0;

    for ( var i = data.length ; i > 0 ; i -- ){

        for( var j = 0 ; j < i - 1 ; j++){

           if( data[j] > data[j + 1] ){

               temp = data[j];

               data[j] = data [j+1];

               data[j+1] = temp;

           }

        }

    }

    return data;

}

Copy the code
  • Selection sort
// Select sort

function selectionSort(data) {

    for( var i = 0; i< data.length ; i++){

        var min = data[i];

        var temp;

        var index = i;

        for( var j = i + 1; j< data.length; j++){

            if( data[j] < min ){

                min = data[j];

                index = j;

            }

        }





        temp = data[i];

        data[i] = min;

        data[index]= temp;

    }

    return data;

}

Copy the code
  • Insertion sort
// Insert sort

function insertionSort(data) {

    var len = data.length;

    for (var i = 1; i < len; i++) {

        var key = data[i];

        var j = i - 1;

        while ( j >= 0 && data[j] > key) {

            data[j + 1] = data[j];

            j--;

        }

        data[j + 1] = key;

    }

    return data;

}

Copy the code

Talk about common design patterns and choose one for scenario analysis

  • The singleton pattern
  • The factory pattern
  • Observer model
  • Adapter mode

View updates are triggered in Vue via observer mode. Vue2. X hijabs the data via Object.defineProperty. When the data changes, the setter is triggered.

When a front-end connects to different back-end services, inconsistent data deconstruction may occur. In this case, the adaptor pattern can be used to accommodate different back-end services so that they connect to the front-end with a unified data deconstruction.

Talk about the for… of

for… Of is a syntax introduced in ES2015 that allows traversing groups of numbers, arrays of classes, maps, sets, and strings

  • An array of iteration
for (const number of [1.2.5]) {}

Copy the code
  • Class array iteration
for (const number of arguments) {}

Copy the code
  • String iteration
const message = 'hello';



for (const character of message) { }

Copy the code
  • The map iteration
const map = new Map(a);

map.set("name".'Front-end future');

map.set("author".'A corner of the River');

for(const item of map){ }

/ / or

for(const [key,val] of map){ }

Copy the code
  • Set the iteration
const names = new Set(['Tom'.'Jack'.'Lily']);

for (let name of names) { }

Copy the code

for… Of is very flexible, and there are other examples that I won’t list here.

Common front-end attack modes

  • XSS attacks
  • CSRF attacks
  • Sql injection
  • HTML script injection

The principle and plan of attack are not explained here

What cross-domain solutions are on the front end

  • JSONP across domains (essentially JS calls)
  • CORS (Background Settings)
  • Nginx Reverse Proxy (O&M configuration)

Cross-domain is a security restriction imposed by the browser. It must be the same as the protocol, domain name, and port, or it will be blocked by the browser

Cross-domain solutions are not commonly used, so I won’t list them

Front-end site routine optimization scheme

Optimization strategy: reduce the number of requests, reduce the size of resources, improve the response and loading speed, optimize the loading time and loading mode of resources

  • Merge, compress, obfuscate HTML/CSS/JS files (Webpack implementation, reduce resource size)
  • Nginx enables Gzip to further compress resources (reduce resource size)
  • Image resources are accelerated using CDN.
  • The ICONS that meet the criteria will be base64 processed (reduce the resource size)
  • Style sheet at the head, JS at the tail (JS single thread, blocking the page; Resource loading mode)
  • Set cache (strong cache and negotiated cache for faster loading)
  • Link or SRC add rel property and set prefetch or preload to preload resources. (Loading time)
  • If UI component libraries are used, load on demand (reduce resource size)
  • SPA project, routing by import or require as needed (reduce resource size)
  • Server rendering SSR, speed up the first screen rendering, conducive to SEO
  • Page skeleton screen, improve the loading speed of the home page (improve the loading speed)
  • Use JPEG 2000, JPEG XR, and WebP image formats instead of JPEG and PNG, especially when pages are full of images
  • Use image lazyload -lazyload

The above is the basic article. If you feel it is of great help, you can follow my wechat public number: Front-end future, I will continue to prepare the framework for you

Also welcome to add my personal wechat: SunnyBoySoft


This article is formatted using MDNICE