Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "sharing interview questions for senior web front-end programmers". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Why write key in a component when writing a React/Vue project, and what is its purpose?

The function of key is to find the corresponding node faster when the diff algorithm is executed, and to improve the speed of diff.

Both vue and react use the diff algorithm to compare the new and old virtual nodes, so as to update the nodes. In the diff function of vue. You can learn about the diff algorithm first.

In the cross-comparison, when the head-to-tail cross-comparison between the new node and the old node has no result, the key in the old node array will be compared according to the key of the new node, and the corresponding old node will be found (here is a map mapping of key = > index). If it is not found, it is considered to be a new node. If there is no key, then a traversal lookup method is used to find the corresponding old node. One is a map mapping, and the other is traversal lookup. Comparatively speaking. Map mapping is faster.

Some of the vue source codes are as follows:

/ / the vue project src/core/vdom/patch.js-488 line / / oldCh is an array of old virtual nodes, if (isUndef (oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx (oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef (newStartVnode.key)? OldKeyToIdx [newStartVnode.key]: findIdxInOld (newStartVnode, oldCh, oldStartIdx, oldEndIdx)

Create the map function:

Function createKeyToOldIdx (children, beginIdx, endIdx) {let I, key const map = {} for (I = beginIdx; I {/ / and then create a new setTimeout, which ensures that the fn function fn.apply (this, arguments) will not be executed within the interval interval after character input. } function sayHi () {console.log ('anti-shake success');} var inp = document.getElementById ('inp'); inp.addEventListener (' input', debounce (sayHi)); / / anti-shake

two。 Throttling

High-frequency events are triggered, but only once in n seconds, so throttling dilutes the execution frequency of the function.

Train of thought:

Each time an event is triggered, it is determined whether there is a delay function waiting to be executed.

Function throttle (fn) {let canRun = true; / / Save a tag return function () {if (! canRun) return; / / through the closure to determine whether the tag is true at the beginning of the function, and if it is not true, return canRun = false; / / immediately set to false setTimeout (() = > {/ / put the execution of externally passed functions in setTimeout fn.apply (this, arguments) / / finally, setting the flag to true (key) after the execution of the setTimeout indicates that the next loop can be executed. When the timer is not executed, the tag is always false and is return at the beginning canRun = true;}, 500);};} function sayHi (e) {console.log (e.target.innerWidth, e.target.innerHeight);} window.addEventListener ('resize', throttle (sayHi))

4. Introduce the difference between Set, Map, WeakSet and WeakMap?

Set

Members are unique, disordered and do not repeat

[value, value], the key value is consistent with the key name (or only the key value, no key name)

Can be traversed by: add, delete, has.

WeakSet

Members are all objects.

Members are weak references, can be reclaimed by garbage collection mechanism, and can be used to save DOM nodes, which is not easy to cause memory leakage.

Cannot be traversed. Methods include add, delete, and has.

Map

Is essentially a set of key-value pairs, similar to a set

Can traverse, there are many ways, can be converted with a variety of data formats.

WeakMap

Only the object's most key name (except null) is accepted, and other types of values are not accepted as key names.

The key name is a weak reference, the key value can be arbitrary, and the object pointed to by the key name can be garbage collected, so the key name is invalid.

Cannot be traversed, the methods are get, set, has, delete.

5. Introduce depth-first traversal and breadth-first traversal, how to achieve?

Depth first traversal (DFS)

Depth-first traversal (Depth-First-Search) is a kind of search algorithm, which traverses the nodes of the tree along the depth of the tree, searching for branches of the tree as deeply as possible. When all edges of node v have been explored, it will be traced back to the start node of the edge of node v. This process continues until the source node has been explored to all other nodes. if there are any undiscovered nodes, select one of the undiscovered nodes as the source node and repeat the above operation until all nodes are explored.

To put it simply, DFS is to trace back from one node in the diagram to the last node, and then to the next path, until it reaches all the nodes, and so on, until there is no path.

DFS can generate the topological sorting table of the corresponding graph, and using the topological sorting table can solve many problems, such as the maximum path problem. Generally, heap data structure is used to assist the implementation of DFS algorithm.

Note: deep DFS is a blind search, there is no guarantee that the searched path is the shortest path, nor is it searching for a specific path, but to see which paths can be selected in the graph.

Steps:

Access vertex v

Starting from the unvisited adjacency points of v, the graph is depth-first traversed until the vertices in the graph that are connected with the path of v are accessed.

If any vertices have not been accessed on the way, a depth-first traversal is redone from an unaccessed vertex until all the vertices have been visited.

Achieve:

Graph.prototype.dfs = function () {var marked = [] for (var item0; I {/ / callback function body}, 1000)

Disadvantages: callback hell, cannot catch errors with try catch, cannot return

The fundamental problem with callback hell is:

Lack of sequencing: debugging difficulties caused by callback hell, which is not consistent with the brain's way of thinking.

The nested function is coupled, and once it is changed, it will affect the whole body, that is, (control inversion)

Nested functions talk too much and it is difficult to deal with errors.

Ajax ('XXX1', () = > {/ / callback function body ajax (' XXX2', () = > {/ / callback function body ajax ('XXX3', () = > {/ / callback function body})}))

Advantages: the problem of synchronization is solved (as long as one task takes a long time, the following tasks must wait in line, which will delay the execution of the whole program).

2. Promise

Promise is created to solve the problem of callback.

Promise implements chained calls, that is, a new Promise is returned after each then. If we return in then, the result of return will be wrapped by Promise.resolve ().

Advantages: solved the problem of callback hell.

Ajax ('XXX1') .then (res = > {/ / return ajax (' XXX2')}) .then (res = > {/ / operational logic return ajax ('XXX3')}) .then (res = > {/ / operational logic})

Cons: Promise cannot be canceled, and errors need to be caught through callback functions.

3. Generator

Features: can control the execution of functions, can be used with the co function library.

Function * fetch () {yield ajax ('XXX1', () = > {}) yield ajax (' XXX2', () = > {}) yield ajax ('XXX3', () = > {})} let it = fetch () let result1 = it.next () let result2 = it.next () let result3 = it.next ()

4. Async/await

Async and await are the ultimate solutions for asynchronism.

The advantage is that the code is clear, and you don't have to write a lot of then chains like Promise, which deals with the problem of callback hell.

Disadvantages: await transforms asynchronous code into synchronous code, and the use of await can degrade performance if multiple asynchronous operations do not have dependencies.

Async function test () {/ / if the following code does not have a dependency, you can use the Promise.all method / / if there is a dependency, it is actually an example of solving the callback hell. Await fetch ('XXX1') await fetch (' XXX2') await fetch ('XXX3')}

Let's look at an example of using await:

Let a = 0let b = async () = > {a = a + await 10 console.log ('2levels, a) / /->' 2' 10} b () a++console.log ('1levels, a) / /->' 1' 1

You may have doubts about the above code, let me explain why:

First, the function b is executed first, and the variable an is still 0 before it is executed to await 10. Because generator is implemented inside await, generator retains what is in the stack, so a = 0 is saved at this time.

Because await is an asynchronous operation, if the later expression does not return Promise, it will be wrapped as Promise.reslove (return value), and then execute the synchronous code outside the function

After the synchronous code is executed, the asynchronous code is executed, and the saved values are taken out and used, at this time a = 0 + 10.

In the above explanation, it is mentioned that generator is implemented internally in await. In fact, await is the syntax sugar of generator plus Promise, and the automatic execution of generator is implemented internally. If you are familiar with co, you can actually implement this syntax sugar by yourself.

9. Talk about your understanding of TCP's three-way handshake and four-wave hand.

That's all for sharing interview questions for advanced web front-end programmers. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.