Hello, this is Derek

Autumn and spring are job-hopping seasons. I hope this article can help you get your desired offer.

The front-end based

The browser

  • Browser caching: strong vs. negotiated caching, and what’s the difference?
  • Localstorage, sessionStorage, cookies, etc., are used for what, what is the difference?
  • Timing timing timing timing timing timing timing timing timing timing timing What is TTFB?
  • Performance is used in the browser.
  • What are the principles of cross-domain and the ways of cross-domain implementation?
  • What does the event loop look like in the browser environment? Macro tasks and micro tasks, as you can see in this article

JavaScript

Base data types and reference data types

  • Basic data types: Undefined, Null, Boolean, String, Number, Symbol
  • Reference data types: Object, Array, Date, RegExp, Function
  • Typeof, instanceof; Includes manual implementation of the following Typeof and Instanceof
/ / implementation typeof function type (obj) {return Object. The prototype. ToString. Call (a). Slice (8, 1). ToLowerCase (); }Copy the code
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__ } }Copy the code

Prototype chain

Understand what a prototype chain does, i.e. Instance. Proto === constructor. Prototype

Object.prototype.__proto__ === null // true
Function.prototype.__proto__ === Object.prototype // true
Object.__proto__ === Function.prototype // true
Copy the code

Here’s a good question to consider:

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
Copy the code

The code above, why is F.a 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
Copy the code

The code above, why is f.a 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
Copy the code

inheritance

There are several ways to inherit:

  • 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']
Copy the code

    Disadvantages:

    • When inheritance is implemented through a stereotype, the stereotype becomes an instance of another type, the original instance properties become the current stereotype properties, and the reference type properties of the stereotype are shared by all instances. (Reference type values are shared by all instances)
    • When creating instances of subtypes, there is no way to pass arguments to the constructor of a 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']
Copy the code

    Advantages:

    • Arguments can be passed to the superclass
    • Fixed drawbacks of stereotypes containing reference type values shared by all instances:
    • Methods are defined in constructors, so function reuse is out of the question.
    • Methods defined in the supertype stereotype are invisible to subtypes.
  • Combinatorial 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(); //benCopy the code

    Disadvantages:

    • In any case, the supertype constructor is called twice: once when the subtype stereotype is created and once inside the subtype constructor.

    Advantages:

    • Arguments can be passed to the superclass
    • Each instance has its own attributes
    • Function reuse is realized
  • Parasitic combinatorial inheritance, parasitic combinatorial inheritance is the most rational inheritance paradigm for reference types. Object. Create is used for optimization on the basis of combinatorial 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(); //benCopy the code
  • ES6 inheritance: 
    class SuperType { constructor(age) { this.age = age; } getAge() { console.log(this.age); } } class SubType extends SuperType { constructor(age, name) { super(age); // Call the parent class constructor(age) this.name = name; } } let instance = new SubType(18, 'draven'); instance.getAge(); / / 18Copy the code
    • All methods defined inside a class are not enumerable. (Methods on ES5 prototypes are enumerable by default)

Closure:

  • Ko:
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)); / / 14Copy the code
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)); / / 14Copy the code
  • Anti-shake and throttling:

Functions such as buffeting and throttling are used to control the frequency of events.

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; }; };Copy the code
// throttle function throttle(fn, threshhold) {let timeout let start = new Date; threshhold = threshhold || 160 return function () { const context = this, args = arguments, If (curr - start >= threshhold) {fn. Apply (context, Args) start = curr} else {function(){fn.apply(context, args)}; }}}Copy the code

var/let/const

This part mainly examines the understanding of LET and VAR, variable promotion, etc.

What is the result of executing the following code?

var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2}; The bar =? Foo =?Copy the code

Bar = {n:1,x:{n:2}}; foo={n:2};

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

10 3 error; The last error is because a is not a function;

= = = = =

Implicit conversion steps: mainly understand what is done in strong and double equality, and it is easy to understand.

Strongly equal (===) first compares whether the types on both sides are the same, and returns false if they are different; If the type is the same, it is judged by ==. Let’s look at the implicit conversion caused by ==.

Implicit conversion caused by the double equal sign

If NaN exists, return false.

Second, before and after the double equal sign to see if there is a Boolean, Boolean will be converted to a number. (False is 0, true is 1)

If the double equals sign is preceded by a string, there are three cases:

ToString () or valueOf(); 2. If the other party is a number, the string is converted to a number. (the previous example has been used) 3. 4. Return false for othersCopy the code

ValueOf () or toString(); otherwise, return false

Null, undefined does not perform type conversion, but they are equal

The.tostring () and.valueof () methods

Normally we think of toString() as a method for converting an object to a string and valueOf() as a method for converting an object to a number, but it’s not as simple as this. Here’s an example:

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

Similarly, let’s look at the valueOf() method:

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

As you can see from the code above, the valueOf() method does not convert the object to a number that reflects the object. Instead, we use toString()

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

The toString() method can be converted to a string, but the toString() method does not have to be called first.

Let’s take a 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); //trueCopy the code

If valueOf() is not a value, then toString will be called.

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

If “1” were a string, it would first call valueOf().

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

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

Arr calls valueOf() first, but the numeric method is simply inherited and not overridden (which we didn’t implement, of course). The return value is the array object itself, not a value type, so it calls toString() instead. This completes the purpose of converting to a string.

instructions

Most objects implicitly convert to value types by first trying to call the valueOf() method. The exception is the Date object, where the valueOf() and toString() methods are carefully overwritten. The default is to call toString(), for example using the + operator, or valueOf() instead in other arithmetic environments.

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); / / 1460886888557Copy the code

Let’s do the following problems 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 // trueCopy the code

Does everything above make sense? Why is the last line of code true?

es6

This section examines es6 proficiency, new types, syntax, and more. I recommend you to take a look at teacher Ruan Yifeng’s ES6 article

Handwritten implementation

Js implementation bind

/ / implementation the bind Function. The 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')Copy the code

Js implementation call

/ / call the Function. The 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')Copy the code

Js implementation setInterval

SetInterval function mySetInterval(fn, time) {let timer = {}; function timeout() { timer.t = setTimeout(() => { fn(); timeout() }, time) } timeout(); return timer; } function clearMyInterval(timer) { clearTimeout(timer.t) }Copy the code

promise

Promise research point more, including the realization of their promise and some call knowledge points

I recommend two articles: Making Promises and Making Promises

css

  • What are the features of margin and padding of box model?
  • What are the flex layout attributes, and what do they mean?
  • What is the implementation of left-right center layout, up-down center layout, up-down left-right center layout?
  • Single line beyond ellipsis… , multiple lines beyond ellipsis…
  • Adaptive layout
  • Responsive layout
  • Less, SCSS, stylus
  • Rem, EM, VW, etc
  • How to implement 1PX on mobile terminal?
  • How does CSS implement triangles?
  • What is the difference between CSS link and import?

html

  • What does meta do
  • Block element, row element distinction and examples
  • What are the new tags in HTML5?
  • Video tag usage, events, etc

The front frame

vue

Vue basic

1, vUE lifecycle: beforeCreate, created, beforeMounte, Mounted, beforeUpdate, updated, beforeDestory, destroyed;

Ii. Vue component Communication:

  • Props (emit);
  • $attr and $listeners,
  • Event bus object (bus.$ON, bus.$emit),
  • Dojo.provide (inject),
  • V – model (props: value, emit: input),
  • $children,
  • vuex

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

Iv. The difference between V-show and V-IF of VUE; The difference between Vue’s Watch and computed;

V. Others: vue server rendering, such as the use of nuxt framework; Use of front-end component libraries, such as Element-UI;

Vue2 and vue3

3 is Proxy+Reflect, 2 is Object.defineProperty; Dom-diff optimization; ComponentApi etc.

vue-router

  • Implemented patterns: hash & History; The difference and analysis of the two
  • Events: global: beforeEach, afterEach; Routing: beforeEnter; Component: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
  • Implementation principle, source code

vuex

  • What is vuex? Vuex website
  • State, getters, mutations(commit), Actions (dispatch), Module
  • MapState, mapMutations, mapGetters, mapActions; The subscribe, subscribeAction
  • Implementation principle, source code, etc

react

First, life cycle

1. What was the life cycle before Act16? 2. What is the life cycle after Act16? 3. What is the difference between Version 16 and pre-version 16? 4. What is requestAnimationFrame? What is requestIdleCallback? How to implement requestAnimationFrameCopy the code
/ / implementation requestAnimationFrame var lastTime = 0 window. RequestAnimationFrame = function (the 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; }Copy the code

Second, the react – hooks

1. What are common Reacthooks? Use useEffect to simulate componentDidMount and componentDidUpdate. What's it for? 4. What is the difference between useEffect and useEffect? 5. What are useMemo and useCallback? What's it for? What's the difference?Copy the code

Third, the react – the router

1. How to implement route switchover? 2. What are the hook functions? What is the difference between onEnter and routerWillLeave 3.link and a tag?Copy the code

Fourth, the story

1. What is redux? What do you do? How is it different from VUex? 2. What pieces does redux contain? State, reducers, ActionsCopy the code

V. Others:

1. Server render next; 2. Component library ANTD; 3. What is the difference between PureComponent and Component? 4. Do you have any suggestions for optimizing React performance? 5. Encapsulate a Promise's setStateCopy the code
Function setStateP(state) {return new promise (resolve => {this.setstate (state, resolve)})}Copy the code

Instrumental – webpack

  • 1. What is Webpack?
  • 2. How does Webpack work?
  • 3. Have you written a plugin? How do you do that?
  • 4. What does loader do? What is the difference between a loader and a plugin?
  • 5. Optimization suggestions for Webpack, etc

Talk about webpack

nodeJs

  • Event-loop: Check out the nodejs event loop in this article
  • Egg: Declaration cycle, directory structure, common plug-ins
  • Koa: The difference between KOA’s middleware and Express’s middleware is that it implements a function of the 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); }}Copy the code

child_process

    1. Spawn, exec, execFile, fork,
    1. Fork is similar to spawn, except that fork creates a child process by executing a JS file.
    1. Spawn, unlike exec and execFile, can be created with a timeout attribute and will be killed if the process times out.
    1. Exec differs from execFile in that exec executes existing commands, while execFile executes files.

pm2

  • Common PM2 commands include start, stop, delete, logs, restart, and list
  • The -i parameter is used to enable multi-threading. Watch, -w, listens for file changes
  • Pm2 configuration file, you can configure multiple apps, an array of apps, start pm2 start pm2. Connfig. js – only=one-app-name

Computer Fundamentals

HTTP series

  • What is a three-way handshake? Why three times?
  • What are four waves? Why four?
  • What is the difference between http1 and HTTP2?
  • How is HTTPS encrypted?
  • How can a request be cancelled? AbortController

The sorting

  • Bubble sort
// Sort from small to large: 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]Copy the code
  • 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]Copy the code
  • Direct insertion sort

The whole sorting process is n-1 insertion, that is, the first record in the sequence is regarded as an ordered sub-sequence, and then the second record is inserted one by one until the whole 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]
Copy the code
  • Hill sorting

Sorting process: first take a positive integer D1 <n, put all the records separated by D1 into a group, direct insertion sort within the group; Then set d2<d1 and repeat the grouping and sorting operation. Until di=1, that is, all records are sorted 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]

Copy the code
  • Quick sort

Through sorting, the records to be sorted are divided into two independent parts. If the keywords of one part of the records are smaller than those of the other part, the two parts can be sorted to achieve the order of the whole 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]
Copy the code

other

  • TCP/IP protocol five layer model: application layer, transport layer, network layer, data link layer, physical layer
  • Algorithmic, leetcode
  • Binary tree traversal, order traversal, depth first, breadth first;
  • Use of stacks and queues
  • Use of linked lists

other

  • hybird
1. What is hybrid? 2. What is JsBridge? How to do that? 3. What should hybrid development pay attention to?Copy the code
  • Preloading and lazy loading:
1. Lazy loading of content including pictures and videos (packaging by using IntersectionObserver) 2. Data preloading, pure H5 prefetch && preloading solution combined with the end 3.js loading on demand (with split implementation of Webpack import().then())Copy the code
  • What are the loading steps for dom documents?
Parse the HTML structure. Load external scripts and stylesheet files. Parse and execute the script code. 4. Construct HTML DOM model. // load external files such as images. 6. The page is loaded. //loadCopy the code
  • What happens between entering the URL in the browser and rendering?
There are many answers to this question on the Internet. The depth and breadth of the answer can show the extent of one's knowledge. I won't go into that here.Copy the code
  • Front-end performance optimization and other aspects

conclusion

There is no answer, just the relevant content of their own sorting out the summary, if there is not, or have to check their own.

Code word is not easy, move a hand to show a praise, then go bai ~~~

Finally, I wish you all the best. If you change your job, you can find your dream job.