2021.6.3 front-end interview questions

2021.6.3 front-end interview questions

1. What is the difference between call and apply? Which one has better performance?

  • Both call and apply are methods on the prototype. Each method is used as an instance of function. These two methods can be called. The purpose of these two methods is to change the this point in the function. The only difference is that the call is passed by parameter. The parameters are passed one by one, and apply is to pass all the parameters that need to be passed to the function in the form of an array. Just like call and apply, you can change the point of this. There is also a bind, but bind does not execute the function immediately, but Process this in the function in advance
  • The performance of call is better than apply (especially when more than 3 parameters are passed to the function)
  • console.time( ); You can test the execution time of a program
  • console.profile( ); Install FireBug in the Firefox browser, you can get more accurate time spent in each step of the program

2. What is the difference between arrow functions and ordinary functions. The constructor can use new to generate an instance, can the arrow function be used? why?

  • Arrow functions are syntactically more concise than ordinary functions
  • The arrow function does not have its own this, the this in it is the this in the context of the inherited function (using call and apply can not change the direction of this)
  • The arrow function does not have arguments (array-like), and can only get the passed parameter set (array) based on...arg
  • Arrow functions cannot be executed by new (because: arrow functions do not have this or prototype)

3. write code to achieve lazy loading of pictures

  • An important solution for front-end performance optimization
  • Through the delayed loading of pictures or data, we can speed up the rendering of the page and make the page open for the first time faster
  • Only by sliding to a certain area, we will load the real picture, which can also save loading traffic

Treatment plan

  • Wrap all the pictures that need to be loaded with delay in a box, set the width and height and the default booth image
  • Start to make all img's src empty, put the address of the real image on the custom attribute of the img, and let the img hide
  • After waiting for all other resources to be loaded, we will start loading images
  • For many pictures, you need to load the real picture after the current picture area is fully displayed when the page is scrolled

4. data type detection scheme

typeof: Direct detection based on the value of the data type (binary) at the bottom of the computer

  • typeof null: The'object' object is stored in the computer, and it is binary storage starting with 000, and null is also the object, so it is detected as an object
  • typeof ordinary objects/array objects/regular objects/date objects are all'object'

instanceof checks whether the current instance belongs to this class

  • The underlying mechanism: As long as the current class appears on the prototype chain of the instance, the result is true
  • Since we can arbitrarily modify the orientation of the prototype, the detection result is inaccurate
  • Cannot detect basic data types

let arr = [];
arr instanceof Array;//true
arr instanceof RegExp;//false
arr instanceof Object;//true
1 instanceof Number;//false, cannot detect basic data types


  • It seems to be easier to use than instanceof (supported by basic data types)
  • The constructor can be changed at will, so it is not accurate

let arr = [];
arr.constructor === Array;//true
arr.constructor === RegExp;//false
arr.constructor === Object;//false

Object.prototype.toString.call( [value])

  •  Standard method of detecting data type: Object.prototype.toString is not converted to a string, but returns the information of the class to which the current instance belongs

  • The standard detection method returns: "[object Number/String/Boolean/Null/Undefined/Symbol/Object/Array]"

5. five situations of this in js

  • Element event binding, event triggering, method execution, this in the method is generally the current element
  • Function execution, see if there is a "dot" in front, there is a "dot", who is in front of the "dot", this is who, if not, this is window, in strict mode this is undefined
  • This in the constructor is an instance of the current class
  • Anonymous function or return this in the function, window is mostly
  • There is no this in the arrow function, this is in the context
  • Violently change the direction of this based on call/apply/bind

6. Please list the new ES6 syntax specifications you know (not less than 5)

  • New declaration commands let and const
    are usually declared with let and const in es6, let means variable and const means constant.

  • Template String is
    identified by a pair of backquotes (`). It can be used as an ordinary string, it can also be used to define a multi-line string, and it can also embed variables, js expressions or functions in the string. , Variables, js expressions or functions need to be written in ${ }.

  • The default parameter
    ES6 of the function provides default values for the parameters. This parameter is initialized when the function is defined, so that it can be used when the parameter is not passed in.

  • Arrow function
    Concise function writing, we call it "arrow function"

  • Object.keys() method: Get all the property names or method names of the object (not including the content of the prototype), and return an array.

  • Object.assign (), the assign method merges the properties and methods of multiple original objects onto the target object. You can receive multiple parameters, the first parameter is the target object, and the following are the source objects.

  • for...of loop

  • Destructuring and Assignment
    According to a certain pattern, extracting values from arrays and objects and assigning values to variables is called destructuring

7. several common situations of undefined and null in JS


  • In the variable promotion (pre-parsing) phase, only undefined is declared, and the default value is undefined.
  • In the strict mode of JS ("use strict"), there is no clear subject, this refers to undefined.
  • Function definitions have no return value (nothing after return or return), and the default return value is undefined.
  • Function definition parameters do not pass values, and the default is undefined.
  • The object does not have this property name, and the property value is undefined by default.
  • In the find method of the array, if it is not found, it is undefined.


  • Manually set the value of the variable or an attribute of the object to be null (no assignment at this time, it will be assigned in the code behind, which is equivalent to initialization.)
  • In the DOM element retrieval of JS, if the specified element object is not retrieved, the result is generally null.
  • The value of Object.prototype._proto_ is also null.
  • In the regular capture, if the result is not captured, the default is also null.

8. What are the data types in JS? What is the difference between them? How to detect it?

1. Basic data types

  • Number
  • String
  • Boolean
  • null
  • undefined
  • Symbol unique value
  • BigInt largest integer

2. Reference data types


  • Ordinary Object Object
  • Array
  • Regular RegExp
  • Date instance
  • Math
  • Instance
  • prototype

3. Functions

  • function
  • Class

Difference: The basic value stores the value, and the reference value stores the address

9. What are the commonly used iteration methods in arrays? What do you mean?

  • foreach
  • The return value of map is a new array, each item in the array is the return value of the callback function every time
  • every(): execute a function for each item in the array, if each item returns true, the method returns true. If one item does not return true, stop the traversal immediately, and then return false
  • some(): execute a function for each item in the array, as long as one item returns true, the method returns true. If not satisfied, then return false
  • filter(): Execute a function for each item in the array, and return the items that return true in an array.

10. closure

1. Closure concept

The private stack memory formed by the function execution will protect all the private variables in the memory, and has nothing to do with the outside. This protection mechanism for function execution is "closure"

2. Two functions of closures

  • Protection Protect private variables without infection from the outside world
  • Save The things in the private scope are occupied by the outside world, forming a private scope that is not destroyed, and save the private variables inside
  • In real projects, because closures will form stack memory that is not destroyed, it is necessary to reduce the use of it as much as possible, but in some cases, the application of closures is still more important

3. Closure application

  • When doing loop event binding before, in the absence of let, the index value of the loop was stored based on the closure.
  • I have also seen Elevation 3 before. There is a chapter about the application of closures. There is a functional programming idea in the curriculum. This is very important, especially the function prototype has a method called bind, which pre-processes this mechanism, which is actually I did it with Ke Lihua function, I also went to see his source code
  • There are anti-shake and throttling in the project, and it is also written by using the idea of closures and Ke Lihua functions to write debounce and throttle

11. What does the browser do when the user enters a url?

  • Send URL request (URL address resolution)
  • DNS domain name resolution
  • Establish a TCP connection with the server (open a channel)
  • Pass the client's information to the server (HTTP request)
  • The service receives your request and processes your request (including returning data to the client)
  • The client receives the data and renders the data to the page)
  • Disconnect the TCP connection with the server (close the channel)

12. Performance optimization of the front end

Reduce the number of HTTP requests and the size of transmitted packets

  • CSS SPRITE (Sprite, Picture Wizard)          
  • Use font icons (iconFont) or use SVG vector graphics


  • Reduce the number of requests or the speed of requests (low quality)              
  • When rendering, it is rendered according to the code, which is faster, and bitmaps (png/jpg/gif) need to be encoded before rendering        

Lazy loading of pictures

  •   Don t request the real picture when loading for the first time, improve the speed of the first loading              
  • When the page is loaded, the pictures that appear in the user's field of vision are actually loaded, and those that do not appear are not loaded first (saves traffic and can also reduce the pressure on the server)          
  • Audio and video cancel preloading (perload ='none'), which can increase the speed of the first rendering of the page, and load it when it needs to be played              
  • Combine and compress css files and js files in the page (implemented by webpack)          
  • If you have money, do CDN (hell distributed server), add server          
  • Do image base64 processing (convert the image to base64 code, which can reduce image requests and improve the speed of page rendering, but base64 will cause too much code, which is not conducive to development and maintenance, but in the future we will use webpack for base64 The batch settings are just fine)  

2. Set up various caching, preprocessing and long connection mechanisms

  • Cache static resources that are not frequently changed (usually 304 or eTag negotiation cache)          
  • DNS caching and preprocessing, reducing DNS lookups          
  • Set up local offline storage (manifest) or store some infrequently changed data as local storage (webstorage)          
  • Establish Connection: keep-alive TCP long connection          
  • Establish Cache-Control and Expires HTTP strong cache          
  • Use HTTP2 version protocol (now using HTTP1.xxx)        

3. code optimization

  • Reduce the use of closures (because excessive use of closures will produce a scope that is not destroyed, if not handled well, it will cause memory overflow)          
  • For animation, the ones that can be solved with css do not need js (the ones that can be processed with transform do not need other styles [hardware acceleration]), and the ones that can be solved with requestAnimationFrame do not need timers              
  • Another advantage of requestAnimationFrame is that when the page is in a dormant state, the animation will pause by itself until the access state is restored.      
  • Avoid using iframes (because ifarme will be embedded in other pages, so when the parent page is rendered, the child page must be rendered)    
  • Reduce direct reflow and redraw of DOM operations          
  • Low coupling and high cohesion (reduce redundant code in the page: encapsulation: plugins, components, frameworks, class libraries, methods)          
  • Use event delegation whenever possible          
  • Avoid infinite loops and nested loops          
  • Use asynchronous programming as much as possible in the project to simulate the effect of multithreading and avoid the blocking of the main thread (promise)          
  • Function of anti-shake and throttling          
  • Reduce the level of An Zeqiong as much as possible (the choice is to parse from right to left) .box a{} a{}          
  • Manual release of stack memory (assigned to null)          
  • For data, we try to load in batches as much as possible (don't request too much data at once, such as paging)    

13. The difference between cookie and local

  • Size limit: the size allowed by the general browser is 8kb, but local is 5mb      
  • Compatibility: local is newly added by H5, so the compatibility is poor, but the cookie has been there for a long time, so the compatibility is good      
  • Stability: cookie is not stable, all kinds of clearing cache will clear the cookie, local is relatively stable (clearing the cache does not work for him) cookie can automatically shuttle between the client and the server, local will not

14. DOM diff principle

  • The tree structure is decomposed according to levels, and only elements of the same level are compared.
  • Add a unique key attribute to each unit of the list structure to facilitate comparison.
  • React will only match components of the same class (the class here refers to the name of the component)
  • In the merge operation, when the setState method of the component is called, React will mark it as dirty. Until the end of each event loop
  • Check React to check that all components marked dirty are redrawn.
  • Selective subtree rendering. Developers can override shouldComponentUpdate to improve diff performance.

15. The difference between http and https