byte

Write it all in an editor, and then the interviewer will ask you how you think about it

Write a bachRequest request, Max requests at the same time, when the first request resolve, add a second request, and so on

Idea: Recursion

var urls = ['a'.'b'.'c'.'d'.'a'.'b'.'c'.'d']
var max = 2
var bach  = function () {
    if (max > 0 && urls.length) {
        let id = urls.shift()
        
        setTimeout(() = > {
            // Execute the request
            console.log(id)
            // After the request is executed, the next one can proceed
            bach(max++)
        },1000)
        bach(max--)
    }
}
bach()
Copy the code

React component implementationmodal.show({durance:'1000',message:'hello'})

CreatePortal? Singleton pattern? I’m not sure about that

var  CreateModal = (function () {
    var instance = null
    function Modal() {
        class Modal {
            show({durance,message}) {
                let el = document.getElementsByTagName('body') [0];
                setTimeout(() = > {
                    this.setState({visible:false})},1000)
                return visible ? ReactDOM.createPortal(
                    (<div>message</div>) : ' ' ,
                    el)
            }
        }
        if(! instance) { instance =new Modal()
       } 
        return  instance
    }
   return Modal 
}) ()
/ / the singleton
var modal = new Modal()

modal.show({durance:'1000'.message:'hello'})
modal.show({durance:'1000'.message:'hello2'})

Copy the code

Give a DOM tree for example

 <div data="3">
   <div data="1">
     	<img data="2">
   		<p data="5"></p>
   </div>
</div>
Copy the code

Div div img 3; div div p 5

That is, return the path and the maximum value in the path

Backtracking algorithm

var res = []
var backTrak = (dom,path,max) = > {
        // Get the DOM child element, 0 is the end of the path
        var children = dom.children
        if(! children.length) { res.push(path.join(' ') + max)
        }
        for(let i = 0 ; i < children.length ; i ++) {
            let child = children[i]
            var tagName = child.tagName
            var digital = child.digital
            backTrak(child,[...path,tagName],math.max(max,digital))
        }
}

Copy the code

Siemens

Mainly the eight-part essay

Vue vs. React

I use vUE 2. The development process feels like object programming. React feels like functional programming. On the whole, vUE is pretty smooth.

Function throttling and anti – shake.

Both prevent multiple calls to the function. Stabilization is deferred execution (performing the last call), throttling is performed once in a while (performing the first call)

HTTP optimization related, such as how to optimize images

DNS pre-resolution, you can obtain IP addresses in advance

Image CDN load, request cropped image

Base64 is used for the small image, Sprite is used for the image. WebP is selected if there is WebP, because WebP format has better image data compression algorithm.

Cache preload prerender

Common component library, LESS

Since I participated in the project of public component library before, I was asked what should be paid attention to when developing public components, such as how to do the skin function

In addition to generality and extensibility, I think it’s important to name a method so that users can guess what your method does by looking at its name. In addition, you need to consider whether to provide a method to the user or whether to pass parameters to the user. Too many parameters will complicate the configuration and too many methods will discourage users.

As for the skin changing function, the previous skin changing was based on Ant. One color variable corresponds to multiple colors, so you can change the color variable during skin changing

Differences in CSS precompilation

Less is JavaScript based and handled on the client side, while Sass is Ruby based and handled on the server side.

Double token refresh, access_token and refresh_token

Don’t understand

Performance optimization

I answered the questions about algorithm-based performance optimization, webpack multi-core performance optimization, using Web-worker for large computation content, lazy loading, loader compilation optimization, and of course there are many other things I didn’t remember on the spot.

How to ensure the code specification?

eslint + pre-commit

Of course, such specification projects vary over time and the level of developers, resulting in unsatisfactory code

So you need to add the code review

Inheritance and prototype chain, what is prototype chain contamination, what causes it

In simple terms, an Object has a _proto_ that points to the prototype of its constructor, which itself is an Object, and the prototype _proto_ points to the prototype of its constructor, until the Object. Prototype is found.

I’ve never heard of prototype chain contamination, which controls the proTO property of the instance object, changes the proTO of all objects in this class, and also requires that _proto_ be assigned as the key, and also requires that the parameters passed should be parsed in JSON, Otherwise _proto_ will be treated as a prototype instead of a key, for example

let o1 = {}
let o2 = JSON.parse('{"a":1,"__proto__":{"b":2}}')
o3 = {}
o3.b
Copy the code

I didn’t succeed. Was the bug fixed?

What is call apply bind

Send points, should be able to handwritten principle of it

Where do memory leaks occur and how can they be avoided

No destroy timer, closure, recursive no exit

Avoid I can only say be careful how you write it

If you take on a project, how do you do it? How do you estimate the hours? For example

I used the example of refactoring code earlier, and first let the leader know that your refactoring process can be difficult. Divide the page to be reconstructed into several dimensions 1. Input/output frequency 2. 3. Use the low frequency

The first type tests the input and output data strictly according to the test case and pulls the test to check the intention of the previous use case. The second type needs to be compared with the source code by use case; The third category can be considered to save time by not reconstructing.

Understand design patterns

The one that’s used a lot is actually the singleton, observer, proxy model

The others add a strategy pattern, decorator pattern

There should be nine modes, and there really aren’t many other front ends

Application of design patterns to engineering

I think of the plug-in principle of Webpack, Tapable is the use of the observer mode, to provide a hook for the caller to develop