His shaggy, unkempt hair suggested that the young interviewer sitting in front of me was not good, and my introduction became formalized. (He pushes his glasses, as if to say, finish your introduction, I’m going to kick your ass, boy!) A sharp look swept across my face. I pretended to be calm…

1, the network aspect also ok (I silently nod), say TCP long connection and short connection difference?

If you know more about them, you can talk about their strengths and weaknesses.

One, short connection

Concept: The client and the server establish a connection and start communication. After one or a specified number of communication ends, the client disconnects the TCP connection. When the client communicates with the server again, the client establishes the TCP connection again. Advantages: no server memory for a long time, then the server can handle the number of connections is more disadvantages: 1, because wait to send or access to resources, to request connection is established, and the HTTP protocol only after the client take the initiative to send data to the server, the server did not return to the corresponding data, then the server would like to take the initiative to send data to the client? Websocket allows the server to actively send data to the client, or to wait until the next request for data, such as polling (30 seconds or longer) pull messages, so the real-time communication between the server and the client is lost. 2, the client uses polling to obtain information in real time, or a large number of clients use the way of short connection communication, so it wastes a lot of CPU and bandwidth resources for establishing and releasing connections, there is a waste of resources, or even can not establish connections. Such as the classic HTTP long polling (wechat web client)Copy the code

Two, long connection

Concept: TCP keeps the connection with the server until the service is no longer needed. Advantages: 1. Fast data transmission 2. 1, because the client and the server always maintain this connection, so in the high concurrency distributed cluster system, the number of clients will be more and more, occupy a lot of system resources 2, TCP itself is a kind of stateful data, in the high concurrency distributed system will lead to the background design is more difficult to doCopy the code

2, Since you mentioned WebSocket, that means you have used it, tell me his characteristics?

Oh, this is about me. I vaguely remember something… It can be seen that the basic investigation is more serious

1, the biggest feature is that the server can actively send data to the client 2, with HTTP protocol has good compatibility. The default ports are 80 and 443, and the handshake phase uses HTTP protocol, so it is not easy to mask the handshake and can pass various HTTP proxy servers. 3, data format is relatively light, low performance overhead, efficient communication. 4. You can send text or binary data. 5, there is no source restriction, the client can communicate with any server. 6, protocol identifier is WS (if encrypted, WSS, encryption layer is TLS), the server URL is the URL.Copy the code

3, see your resume used map, tell me what kinds of coordinate system map has now?

I only answered the first two, I really don’t know much about these. Should still have, can consult by oneself

1. Gcj-02 coordinate system: The coordinates of the National Bureau of Surveying and Mapping, Mars coordinate system (Autonavi, Tencent and Google China map all use it) 2. Bd-09 coordinate system: (the coordinate system used by Baidu China Map) 3. Geocentric coordinate system, GPS original coordinate system (in China, GPS coordinates are not allowed to be used in any map products, supposedly for the sake of secrecy)Copy the code

4, Can you write a new() by hand?

He pulled his sleeves and opened it

function myNew() {
  var constr = Array.prototype.shift.call(arguments);
  var obj = Object.create(constr.prototype);
  var result = constr.apply(obj, arguments);
  return result instanceof Object? result : obj;
}
Copy the code

5. What is HTTP?

Keep your heads up and stop saying HTTP is HyperText Transfer Protocol.

HTTP is a convention and specification for the transfer of hypertext data, such as text, pictures, audio, and video, between two points in the computer world.Copy the code

The difference between HTTP and HTTPS?

1. HTTP runs on TOP of TCP, and all transmitted content is in plain text. HTTPS runs on top of SSL/TLS, and SSL/TLS runs on top of TCP. HTTPS is an enhanced version of HTTP (HTTP +SSL/TLS= HTTPS). The HTTP port number is 80, and HTTPS is 443.Copy the code

At this point, the little brother of the interviewer took a sip of 82 years of coffee and thought, what’s this guy’s story?

7. What is the difference between computed and Watch in Vue?

1. Computed: This is a cached Watcher that updates the view when dependent properties change. This method is applicable to computing scenarios where performance is consumed. When the expression is too complex, putting too much logic in the template will make the template difficult to maintain, so complex logic can be processed in the calculation properties. 2. Watch: No caching, more to play a role of observation. You can listen for certain data to perform callbacks. When deep listening is required, turn on deep:true.Copy the code

8. What is the principle of V-Model?

Use Watcher to build a communication bridge between the Observer and Compile, and achieve data changes -> View update when initializing vue instances, traverse the data object, Add get and set methods to each keyvalue pair using Object.definedProperty on data, using the DOM mechanism of event listening to the view to change the dataCopy the code

9. Describe the execution order of the Event Loop

Investigate macro and micro tasks

At the beginning, the whole script is executed as a macro task. 2. During the execution process, the synchronized code is executed directly, and the macro task enters the macro task queue and the micro task enters the micro task queue. 5. Check whether there are Web Worker tasks, and perform 6. Complete the macro tasks of this round, return to 2, and repeat the cycle until the macro tasks and micro tasks are emptyCopy the code
Macro tasks: Script, setTimeout, setInterval, setImmediate, I/O, UI Rendering Microtasks: MutationObserver, Promise.then() or Catch (), fetch API, V8's garbage collection process, Node's unique process.nexttickCopy the code

Introduce the virtual DOM

1. The virtual DOM is essentially a DOM node described by a native JavaScript object. Is a layer of abstraction from the real DOM. 2. DOM manipulation in a browser is expensive. Frequent DOM operations will cause performance problems, so this layer of abstraction is needed. During the patch process, the differences are updated to the DOM as soon as possible, which ensures that the DOM will not suffer from poor performance. 3. The virtual DOM in Vue2. X mainly uses Snabbdom. js for reference, and the inferno.Copy the code

Cross-domain understanding, how to solve, why cross-domain?

Cross-domain is created because of the same origin policy of the browser. The same origin policy refers to the following: 1. Domain name 2. Port number 3. The SRC attribute using script tag is not restricted by the same origin policy, because all SRC attribute and href attribute are not restricted by the same origin policy, can request third-party server resource content. After the server sets the Access-Control-Allow-Origin HTTP response header, the browser will Allow cross-domain requestsCopy the code

12. Talk about backflow and redraw

Backflow: Backflow occurs when changes to the DOM structure cause the DOM geometry to change. Process: Since the structure of the DOM has changed, it is necessary to start from the DOM generation step, through the style calculation, layout tree generation, layer tree creation, and then to generate the drawing list and the display display of the entire rendering process, which is very expensive.Copy the code
Redraw: Redraw occurs when DOM changes result in style changes that do not affect geometry properties. Process: Since there is no change in DOM geometry, the location information of elements does not need to be updated. Therefore, when redrawing occurs, the stage of survival layout tree and layer tree establishment will be skipped, and the drawing list will be directly generated, and then the following series of operations such as partition and bitmap generation will continue.Copy the code

The little brother thought for half a minute, the scene was once very awkward, said the first face here, you wait for a while. (Later, the technical director was called, and I felt a little nervous.) Finally, the technical director did not ask about the technology, but asked me about the project. Fortunately, it did not hurt me

This finally passed, but did not choose to go, because I think the platform is not what I want, and I feel that there is no sincerity…