Interview questions

Posted Jun 26, 202010 min read

JavaScript data type Number string undefined object symbol null boolean

The definition of closure:The function that can access the variables in the function is the closure
Cause of memory leak:closure,

setstate two ways of writing

this.setState({
    xxx:
})

this.setState((nextState)=>{
    return({
    xxx:
    })
})


z-index:level determines the level of the element after positioning, the higher the level, the higher the level

position property:

 fiexd--Fixed positioning, relative to browser positioning;
 static---static positioning;
 relative---relative positioning; positioning relative to itself;
 absolute---absolute positioning; positioning relative to the parent element, relative to the window if there is no parent element;
 sticky---Sticky positioning must specify one of 4 values:top, bottom, left, right

16.8 What's new in React
Pureconpoment:instead of shouldercomponent, the page value has not changed and the page will not be re-rendered

hook

lazy

Asynchronous loading

Foreground routing background routing difference
Foreground routing Jump page
Background routing interface access address

Differences between ES6 modules and CommonJS modules
The CommonJS module outputs a copy of the value, and the ES6 module outputs a value reference.
The CommonJS module is loaded at runtime, and the ES6 module is the output interface at compile time.

The meaning of XSS:Cross-site scripting attack, so the abbreviation of cross-site scripting attack is XSS. A malicious attacker inserts malicious Script code into a Web page. When a user browses the page, the Script code embedded in the Web will be executed, thereby achieving the purpose of maliciously attacking the user.

## Do the project process
* Project flow(shopping cart) 1 month -> 16 days 7 days
wiki:online documentation to write his needs
1. Requirements review:front-end(FE) back-end(DEV) test(QA) design(UI) product(PM)
Evaluate whether the requirements are reasonable, cut off unreasonable requirements, and realize difficult requirements

2. The effect chart is displayed in the UI.

3. Simultaneous development of front and back ends:front-end packaging components and pages
//mock tool Ali RAP
///abc/ddd {name:' ', age:22}
///mock/abc/ddd {name:Xiaobai, age:2}

4. Test master(online branch) pre(online branch) dev(development branch)

1) Test environment test branch dev
2) Dev is completely fine. The code is merged into the master group and the master branch is released.
Going online is always going to master

5. After going online, regression testing has bugs.

diff algorithm:
Efficient diff algorithm can ensure the smallest changes to the actual DOM
But the complexity of the standard Diff algorithm requires O(n^3)
This obviously cannot meet the performance requirements. To achieve the purpose of refreshing the interface as a whole every time
The algorithm must be optimized
Two simple assumptions are made in React combined with the characteristics of the web interface
Make the Diff algorithm complexity directly reduced to O(n)

1. Two identical components produce similar DOM structures Different components produce different DOM structures
2. For a group of child nodes at the same level, they can be distinguished by a unique id

Comparison of different node types
In order to compare between trees, we must first be able to compare two nodes. In React, we compare two virtual DOM nodes.
What should we do when the two nodes are different? There are two cases
1. Different node types
2. Same node type but different attributes

Different node types Delete the original node directly and insert a new node.

Virtual DOM(VDOM) is the representation of real DOM in memory
The UI representation is stored in memory and synchronized with the actual DOM
This is a step that takes place between the call of the rendering function and the display of the element on the screen. The entire process is called reconciliation

## event loop event loop mechanism
1. Perform the synchronization task first
2. Microtask call stack [resolve(1), resolve(2), resolve(3)]
3. Macrotask:setTimeout setInterval I/O(asynchronous operation) DOM rendering

## react event mechanism
The event declared on the React component is not bound to the native DOM node corresponding to the React component, but is bound to the document node. The triggered event is the packaging of the native event.

React internal event system implementation can be divided into two stages:event registration, event trigger, the main categories involved are as follows:
ReactEventListener:responsible for event registration and event distribution. React registers all DOM events to the document node. Event distribution mainly calls dispatchEvent, starting from the event triggering component and traversing to the parent element.
ReactEventEmitter:responsible for the execution of events on each component.
EventPluginHub:responsible for the storage of callback functions

## B C
B:Business
C:Customer

Both B2B and C2C are on third-party platforms. B2C operates on its own platform.

B2B:Business and business Alibaba
B2C:Business to personal excellence Dangdang Jingdong
C2C:Individual-to-individual Taobao shop

## async principle
async === generator + automatic actuator
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF()
function step(nextF) {
let next
try {
next = nextF()
} catch(e) {
return reject(e)
}
if(next.done) {
return resolve(next.value)
}
Promise.resolve(next.value).then(function(v) {
step(function() {return gen.next(v) })
}, function(e) {
step(function() {return gen.throw(e) })
})
}
step(function() {return gen.next(undefined) })
})
}

## PV UV
PV:Statistics page click
Role:PM(the number of times a click is clicked on the product statistics page)
Implementation:
1. Create an img
2. img.src = '1.gif?name=abc'
Use:Click Baidu button plus pv name="abc"
1. pv.js