Today, I will talk to you about the knowledge points of the front-end interview. It will soon be the season of gold, three and silver, and I hope this article can help you and help you get your favorite offer.

Front-end basics

Browser

Browser caching mechanism: strong caching and negotiation caching, and what is the difference?
Storage related: What are the functions of localstorage, sessionStorage, cookie, etc., and what is the difference?
The things in the network panel of the browser, mainly what does the time period under timing mean? What is TTFB?
Have you used the performance of the browser, and what is it used for?
The principle of cross-domain, what are the ways to achieve cross-domain?
What is the event loop in the browser environment? In fact, it is the macro task and the micro task, you can read this article

JavaScript

Basic data types and reference data types

Basic data types: Undefined, Null, Boolean, String, Number, Symbol
Reference data types: Object, Array, Date, RegExp, Function
Here may be considered, typeof, instanceof; including the manual implementation of the following typeof and instanceof

// 实现typeof
function type(obj) {
	return Object.prototype.toString.call(a).slice(8,-1).toLowerCase();
}

// 实现instanceof
function instance(left,right){
    left=left.__proto__
    right=right.prototype
    while(true){
       if(left==null)
       	  return false;
       if(left===right)
          return true;
       left=left.__proto__
    }
}

Prototype chain

Understand what the prototype chain does, that is: instance. proto === constructor.prototype

Object.prototype.__proto__ === null // true
Function.prototype.__proto__ === Object.prototype // true
Object.__proto__ === Function.prototype // true

There is a better question, you can think about it:

function F() {}
Object.prototype.b = 2;
F.prototype.a = 1;
var f = new F();
console.log(f.a) // 1
console.log(f.b) // 2
console.log(F.a) // undefined
console.log(F.b) // 2
复制代码

In the above code, why is Fa undefined?

function F() {}
Object.prototype.b = 2;
Function.prototype.a = 1;
var f = new F();
console.log(f.a) // undefined
console.log(f.b) // 2
console.log(F.a) // 1
console.log(F.b) // 2

In the above code, why is fa undefined?

function F() {}
F.prototype.a = 1;
var f1 = new F()
F.prototype = {
    a: 2
}
var f2 = new F()
console.log(f1.a) // 1
console.log(f2.a) // 2

inherit

Several ways of inheritance:

Prototype chain inheritance:

function SuperType() {
  this.name = 'Yvette';
  this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.getName = function () {
    return this.name;
}
function SubType() {
    this.age = 18;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

let instance1 = new SubType();
instance1.colors.push('yellow');
console.log(instance1.getName());
console.log(instance1.colors); // ['red', 'blue', 'green', 'yellow']

let instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green', 'yellow']

Disadvantages:

- When inheritance is achieved through prototypes, the prototype becomes an instance of another type, and the original instance attributes become the current prototype attributes, and the reference type attributes of the prototype will be shared by all instances. (The reference type value is shared by all instances)
- When creating an instance of a subtype, there is no way to pass parameters to the constructor of the supertype without affecting all object instances

Constructor inheritance:

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
function SubType(name) {
    SuperType.call(this, name);
}
let instance1 = new SubType('draven');
instance1.colors.push('yellow');
console.log(instance1.colors);  // ['red', 'blue', 'green', 'yellow']

let instance2 = new SubType('ben');
console.log(instance2.colors);  // ['red', 'blue', 'green']

advantage:

- Can pass parameters to the super class
- Solve the problem that the reference type value contained in the prototype is shared by all instances. Disadvantages:
- The methods are all defined in the constructor, and there is no way to talk about function reuse.
- The methods defined in the supertype prototype are invisible to the subtype.

Combination inheritance:

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SuberType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SuberType.prototype = new SuperType()
SuberType.prototype.constructor = SuberType

let instance1 = new SuberType('draven', 25);
instance1.colors.push('yellow');
console.log(instance1.colors); // ['red', 'blue', 'green', 'yellow']
instance1.sayName(); //draven

let instance2 = new SuberType('ben', 22);
console.log(instance2.colors);  // ['red', 'blue', 'green']
instance2.sayName();//ben

Disadvantages:

- In any case, the supertype constructor is called twice: once when creating the subtype prototype, and the other time inside the subtype constructor. advantage:
- Can pass parameters to the super class
- Each instance has its own properties
- Function reuse

Parasitic combined inheritance. Parasitic combined inheritance is the most rational inheritance paradigm for reference types. Use Object.create to optimize on the basis of combined inheritance:

function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SuberType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SuberType.prototype = Object.create(SuperType.prototype)
SuberType.prototype.constructor = SuberType
let instance1 = new SuberType('draven', 25);
instance1.colors.push('yellow');
console.log(instance1.colors); //[ 'red', 'blue', 'green', 'yellow' ]
instance1.sayName(); //draven

let instance2 = new SuberType('ben', 22);
console.log(instance2.colors); //[ 'red', 'blue', 'green' ]
instance2.sayName();//ben

ES6 inheritance:

class SuperType {
    constructor(age) {
        this.age = age;
    }

    getAge() {
        console.log(this.age);
    }
}

class SubType extends SuperType {
    constructor(age, name) {
        super(age); // 调用父类的constructor(age)
        this.name = name;
    }
}

let instance = new SubType(18, 'draven');
instance.getAge(); // 18

- All methods defined in the class are not enumerable. (The methods on the ES5 prototype are enumerable by default)

Closure:

Ke Lihua:

// 实现固定参数的curry
function add(a, b, c, d) {
    return a + b + c + d
}

function curry(fn) {
    const length = fn.length
    let params = []
    return function func() {
        params = params.concat([].slice.call(arguments))
        if (params.length === length) {
            const res = fn.apply(null, params);
            params = [];
            return res;
        } else {
            return func;
        }
    }
}

const addCurry = curry(add);
console.log(addCurry(1, 2)(3, 4)); // 10
console.log(addCurry(2)(3)(4)(5)); // 14

// 实现随意参数的柯理化
function add() {
    let params = [].slice.call(arguments);
    function func() {
        params = params.concat([].slice.call(arguments))
        return func;
    }
    func.toString = () => {
        return  params.reduce((a, b) => {
            return a + b;
        }, 0);
    }
    return func;
}

console.log(add(1, 2)(3, 4)); // 10
console.log(add(2)(3)(4)(5)); // 14

Anti-shake and throttling:

Function anti-shake and throttling are both methods to control the frequency of event triggering.

// 防抖
export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result;

    let nowTime = Date.now || function () {
        return new Date().getTime();
    };

    const later = function () {
        let last = nowTime() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function () {
        context = this;
        args = arguments;
        timestamp = nowTime();
        let callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};

// 节流
function throttle(fn, threshhold) {
    let timeout
    let start = new Date;
    threshhold = threshhold || 160
    return function () {
        const context = this, args = arguments, curr = new Date() - 0
        clearTimeout(timeout)//总是干掉事件回调
        if (curr - start >= threshhold) {
            fn.apply(context, args)
            start = curr
        } else {
            //让方法在脱离事件后也能执行一次
            timeout = setTimeout(function(){
                fn.apply(context, args)
            }, threshhold);
        }
    }
}

var/let/const

This part mainly examines the understanding of let and var, variable promotion, etc.

What is the execution result of the following code?

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

bar = ？
foo = ？

The result of the above execution is bar = {n:1,x:{n:2}}; foo={n:2}:;

a();
var a=3;
function a(){
alert(10)
}
alert(a)
a=6;
a()

The result of the above execution is 10 3 error:; The final error is because a is not a function;

== and ===

Steps of implicit conversion: Mainly figure out what is done in the strong and double wait, it is easy to understand.

Strong class (=) Will first compare whether the types on both sides are the same, if they are different, it will return false directly; if the types are the same, it will followTo judge, let's look at the implicit conversion caused by ==.

Implicit conversion caused by double equal sign

1. First, look at whether there are NaNs before and after the double equal sign. If there are NaNs, always return false.

Second, look at whether there is a Boolean before and after the double equal sign. If there is a Boolean, convert the Boolean to a number. (False is 0, true is 1)

3. Next, look at whether there are strings before and after the double equal sign. There are three situations:

1、对方是对象，对象使用toString()或者valueOf()进行转换；

2、对方是数字，字符串转数字；（前面已经举例）

3、对方是字符串，直接比较；

4、其他返回false

4. If it is a number, the other party is an object, and the object is compared with valueOf() or toString(), and all others will return false

Five, null, undefined will not be type converted, but they are equal

.toString() method and .valueOf() method numerical conversion

Under normal circumstances, we think that to convert an object to a string requires calling the toString() method, and converting an object to a number requires calling the valueOf() method, but it is not that simple in real application. Look at the following code example:

let obj = {
 name: "draven",
 age: 28
}
console.log(obj.toString()); //[object Object]

In the same way, let's look at the valueOf() method:

let arr = [1, 2, 3];
console.log(arr.valueOf());//[1, 2, 3]

As can be seen from the above code, the valueOf() method does not convert the object into a number that can reflect this object. Instead, we use toString()

let arr = [1, 2, 3];
console.log(arr.toString());//1,2,3

Note: Many friends think that the toString() method must be called first to convert to a string. In fact, this is a wrong understanding. We should understand that calling the toString() method can be converted to a string, but it is not necessary to convert the string to the first call toString() method.

Let's look at the following code:

let arr = {};
arr.valueOf = function () { return 1; }
arr.toString = function () { return 2; }
console.log(arr == 1);//true

let arr = {};
arr.valueOf = function () { return []; }
arr.toString = function () { return 1; }
console.log(arr == 1);//true

From the above code, we can see that the conversion first calls valueOf(). If valueOf() is not a value, then toString is called to convert!

let arr = {};
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr == "1");//true

If "1" is a string, then valueOf() is called first.

let arr = [2];
console.log(arr + "1");//21

In the above example, toString() is called; because arr.toString() is followed by 2.

The conversion process is like this. First, arr will first call the valueOf() method, but this method of numbers is simply inherited and has not been rewritten (of course, this rewrite is not implemented by us). The return value is the array object itself, not A value type, so the toString() method is called instead, so the purpose of converting to a string is achieved.

Description

Most objects are implicitly converted to value types by first attempting to call the valueOf() method. But the Date object is an exception. The valueOf() and toString() methods of this object have been carefully rewritten. The default is to call the toString() method, such as using the + operator. If in other arithmetic environments, it will be called instead. valueOf() method.

let date = new Date();
console.log(date + "1"); //Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date + 1);//Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date - 1);//1460886888556
console.log(date * 1);//1460886888557

For example, to consolidate and improve, let's work on the following topics together!

let a;
console.dir(0 == false);//true
console.dir(1 == true);//true
console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false
console.dir(1 == undefined);//false
console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true
console.dir(1==="1");//false

[] == 0 // true

Can the above be understood? What is the reason for the result of the last line of code to be true?

es6

This part examines the proficiency of es6, some new types, grammar, and so on. I recommend everyone to take a look at the es6 article of teacher Ruan Yifeng

Handwritten implementation

js implements bind

// 实现bind
Function.prototype.myBind = function (context,...args) {
    let self = this;
    let params = args;
    return function (...newArgs) {
        self.call(context, ...params.concat(...newArgs))
    }
}
var a = {
    name: 'this is a'
}

function sayName() {
    console.log(this.name, arguments)
}

let newfn = sayName.myBind(a, '1234', '5678')
newfn('1000', '2000')

js implements call

// 实现call
Function.prototype.myCall = function (context,...args) {
    context.fn = this;
    context.fn(...args)
    delete context.fn;
}
var a = {
    name: 'this is a'
}
function sayName() {
    console.log(this.name, arguments)
}
sayName.myCall(a, '1234', '5678')

js implements setInterval

// setTimeout 实现setInterval
function mySetInterval(fn, time) {
    let timer = {};
    function timeout() {
        timer.t = setTimeout(() => {
            fn();
            timeout()
        }, time)
    }
    timeout();
    return timer;
}

function clearMyInterval(timer) {
    clearTimeout(timer.t)
}

promise

Promises have a lot of inspection points, including the realization of their own promises and some knowledge points of invocation

Recommend two articles: Realizing Promise and Promise

css

Box model, what are the characteristics of the margin and padding of the box model?
What are the attributes of flex layout and what do they mean?
What is the implementation method of centered layout on left and right, centered layout on top and bottom, and centered layout on top and bottom left and right?
Single line exceeds omission..., multiple lines exceed omission...
Adaptive layout
Responsive layout
less、scss、stylus
rem 、 em 、 vw 等
How to realize 1px on the mobile terminal?
How does css implement triangles?
What is the difference between css link and import?

html

What is meta used for
Differences and examples of block elements and row elements
What are the new tags in html5?
Use of video tags, events, etc.

Front-end framework

view

vue basic

一、 vue的生命周期： beforeCreate、created、beforeMounte、mounted、beforeUpdate、updated、beforeDestory、destroyed；

2. Vue component communication:

props(emit)；
$a t t r and$ listeners,
Event bus object (bus. $o n, b u s .$ emit)，
provide(inject)，
v-model(props:value, emit:input )，
$children，
vuex

3. Use and principle of keep-alive, LRU algorithm

Fourth, the difference between v-show and v-if of vue; the difference between watch and computed in vue;

Five, other: vue server-side rendering, such as the use of framework nuxt; the use of front-end component libraries, such as element-ui;

vue2 and vue3

3 is Proxy+Reflect, 2 is Object.defineProperty; optimization of dom-diff; componentApi, etc.

vue-router

Implementation mode: hash & history; the difference and analysis of the two
Event: global: beforeEach, afterEach; routing: beforeEnter; component: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
Implementation principle, source code

vuex

What is vuex? vuex official website
state、getters、mutations(commit)、actions(dispatch)、module
mapState、mapMutations、mapGetters、mapActions；subscribe，subscribeAction
Implementation principle, source code, etc.

react

One, life cycle

  1.react16之前的生命周期是什么？
  2.react16之后的生命周期是什么？
  3.react16和react16之前的版本有什么区别？
  4.requestAnimationFrame是什么？requestIdleCallback是什么？如何实现requestAnimationFrame

// 实现requestAnimationFrame
var lastTime = 0
window.requestAnimationFrame = function (callback) {
    let now = Date().now;
    let timeCall = Math.max(0, 16 - (lastTime - now));

    let id = setTimeout(function () {
        callback(now + timeCall)
    }, timeCall)

    lastTime = now + timeCall;
    return id;
}

二、react-hooks

1.常用的reacthooks都有哪些？
2.使用useEffect模拟componentDidMount和componentDidUpdate
3.useEffect返回的是什么？做什么用的？
4.useEffect和useLayoutEffect的区别是什么？
5、useMemo和useCallback是什么？做什么用的？有什么区别？

三、react-router

1.如何实现路由切换，有几种方式？
2.有哪几个钩子函数？onEnter和routerWillLeave
3.link与a标签的区别什么？

Four, redux

1.redux是什么？做什么的？与vuex有什么区别？
2.redux包含哪几块？state，reducers，actions

5. Other:

1.服务端渲染next；
2.组件库antd；
3.PureComponent与Component的区别是什么？
4.react的性能优化有什么建议？
5.封装一个promise的setState

// 使用promise封装setState
function setStateP(state) {
    return new Promise(resolve => {
        this.setState(state, resolve)
    })
}

Tool type-webpack

1. What is webpack?
2. What is the working principle of webpack?
3. Have you ever written a plugin? How did it happen?
4. What does loader do? What is the difference between loader and plugin?
5. Optimization suggestions on webpack, etc.

Talk about webpack

nodeJs

event-loop: You can read this article nodejs event loop
egg: life cycle, directory structure, commonly used plug-ins

koa: The difference between Koa's middleware and express's middleware, a function that implements an onion ring model

// 洋葱圈模型
function compose(middleware) {
    return function (context, next) {
        let index = -1;
        function dispatch(i) {
            if (i <= index) {
                return Promise.reject('err')
            }
            index = i;
            let fn = middleware[i];
            if(i === middleware.length) {
                fn = next;
            }
            if (!fn) {
                return Promise.resolve();
            }
            try {
                return Promise.resolve(fn(context, function next() {
                    return dispatch(i + 1);
                }))
            } catch (e) {
                return Promise.reject(e);
            }
        }
        dispatch(0);
    }
}

child_process

1. spawn、exec、execFile、fork、
1. Fork is similar to spawn, but the difference is that js files need to be executed when fork creates a child process;
1. The difference between spawn and exec and execFile is that when the latter two are created, the timeout attribute can be specified to set the timeout period, and the process will be killed once it times out;
1. The difference between exec and execFile is that exec executes existing commands, while execFile executes files.

pm2

PM2 commonly used commands: start, stop, delete, logs, restart, list
-i parameter, start multi-thread; watch, -w, monitor file changes
pm2 configuration file, you can configure multiple apps, apps array, start pm2 start pm2.connfig.js —only=one-app-name

Computer Basics

http series

What is the three-way handshake? Why does it take three times?
What is the four wave of hands? Why is it necessary four times?
What is the difference between http1, http2, and https?
How is https encrypted?
How to cancel the request? AbortController

Sort

Bubble Sort

// 从小到大排序：
function bubblingSort(list){
     let temp;
     for(let i=0; i<list.length; i++){
          for(let j=i; j<list.length; j++){
               if(list[i] > list[j]){
                    temp = list[i];
                    list[i] = list[j];
                    list[j] = temp;
               }
          }
     }
     return list;
}
let res = bubblingSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

Direct selection sort

从小到大排序：
function selectSort(list){
     let r,temp;
     for(let j=0; j<list.length; j++){
          for(let i = j+1; i<list.length; i++){
               if(list[j] > list[i]){
                   temp = list[j];
                   list[j] = list[i];
                   list[i] = temp;
               }
          }
     }
     return list;
}
let res = selectSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

Direct insertion sort

The entire sorting process is n-1 insertions, that is, the first record in the sequence is regarded as an ordered subsequence, and then the second record is inserted one by one until the entire sequence is ordered.

function insertSort(list) {
    let flag;
    for(let index = 1; index < list.length; index++) {
        flag = list[index];
        let j = index - 1;
        while (flag < list[j]) {
            list[j + 1] = list[j]
            j--;
        }
        list[j + 1] = flag;
    }
     return list;
}
let res = insertSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

Hill sort

Sorting process: first take a positive integer d1<n, put all the records separated by d1 into a group, and perform direct insertion sorting in the group; then take d2<d1, repeat the above grouping and sorting operations; until di=1, that is, put all records Sort in a group

function shellSort(list) {
    const length = list.length;
    let j, temp;
    for (let d = parseInt(length / 2); d >= 1; d = parseInt(d / 2)) {
        for (let i = d; i < length; i++) {
            temp = list[i];
            j = i - d;
            while (j >= 0 && temp < list[j]) {
                list[j + d] = list[j];
                j -= d;
            }
            list[j + d] = temp;
        }
    }
    return list;
}
let res = shellSort([10, 8, 2, 23, 30, 4, 7, 1])
console.log(res); // [1, 2, 4, 7, 8, 10, 23, 30]

Quick sort

By sorting once, the records to be sorted are divided into two independent parts, and the keywords of one part of the records are smaller than the keywords of the other part of the records, then the two parts of the records can be sorted to achieve the order of the entire sequence.

function quickSort(v,left,right){
    if(left < right){
        var key = v[left];
        var low = left;
        var high = right;
        while(low < high){
            while(low < high && v[high] > key){
                high--;
            }
            v[low] = v[high];
            while(low < high && v[low] < key){
                low++;
            }
            v[high] = v[low];
        }
        v[low] = key;
        quickSort(v,left,low-1);
        quickSort(v,low+1,right);
    }
}
let list = [10, 8, 2, 23, 30, 4, 7, 1]
quickSort(list, 0, 7)
console.log(list); // [1, 2, 4, 7, 8, 10, 23, 30]

other

The five-layer model of the tcp/ip protocol: application layer, transport layer, network layer, data link layer, and physical layer
Algorithm-related, let's brush it on leetcode
The traversal of binary trees, etc., traversal in front, middle and back, depth first, breadth first;
Use of stacks and queues
Use of linked lists

other

hybird

1、什么是hybrid？
2、jsbridge是什么？如何实现？
3、hybrid开发需要注意什么？

Preloading and lazy loading:

1.包括图片视频等内容的懒加载(IntersectionObserver的使用封装)
2.数据的预加载，纯h5的prefetch && 与端结合的预加载方案
3.js的按需加载(配合webpack的import().then()的split实现)

What are the loading steps of the dom document?

1、 解析HTML结构。
2、 加载外部脚本和样式表文件。
3、 解析并执行脚本代码。
4、 构造HTML DOM模型。//ready
5、 加载图片等外部文件。
6、 页面加载完毕。//load

What has passed since the browser entered the url to the completion of the display?

此问题网上有很多回答，属于自由发挥问题；回答的深度和广度能够看出本人的知识面。此处就不多说了。

Front-end performance optimization and other aspects

to sum up

More interview knowledge points I have compiled into PDF

Space is limited, only part of the content is shown

If you need this full version of interview questions + analysis, [click me] to get it for free.

The code word is not easy, move your finger to like it, and then go~~~

Finally, I wish you all can find your favorite job if you change jobs.

Prepare for gold three silver four, a summary of the front-end interview knowledge points, it is recommended to collect

Front-end basics

Browser

JavaScript

Basic data types and reference data types

Prototype chain

inherit

Closure:

var/let/const

== and ===

Implicit conversion caused by double equal sign

.toString() method and .valueOf() method numerical conversion

Description

es6

Handwritten implementation

js implements bind

js implements call

js implements setInterval

promise

css

html

Front-end framework

view

vue basic

vue2 and vue3

vue-router

vuex

react

Tool type-webpack

nodeJs

child_process

pm2

Computer Basics

http series

Sort

other

other

to sum up

If you need this full version of interview questions + analysis, [click me] to get it for free.

Guess you like