preface

Two weeks ago, I posted this boiling point:

So I really just building group is a collection of topic, and team colleagues to write the answer, we also do what, just want to do a meaningful thing, now I’m finishing under our answer, some is not necessarily a very specific answer, but also provide ideas and resources for everyone to see if there is any add?

How does Bytedance stay connected to the server

The simplest and most crude way to keep the connection with the server is to keep the communication with the server through the request polling. The client not only costs money to maintain the scheduled poller, but also makes the server more stressed, so it is not recommended.

Another option is to set the request timeout to a value large enough to block the entire connection phase as long as the server does not return a message after the client initiates the connection, so this option is not recommended.

The last one is WebSocket. After the server completes the upgrade from HTTP to WebSocket, the server can actively push information to the client, which solves the synchronization delay caused by polling. Since WebSocket only needs one HTTP handshake, the server can keep communicating with the client until the connection is closed, thus eliminating the need for the server to repeatedly parse the HTTP protocol and reducing the cost of resources.

Bytedance talks about implicit type conversions

When we use a function like Number(), we call it explicit casting. The rules for the conversion are that if it’s a primitive type, we refer to the corresponding table in the specification for the conversion. If it’s not a primitive type, First refer to the ToPrimitive method in the specification to convert to the basic type, and then convert according to the corresponding table. When ToPrimitive is executed, it will judge whether valueOf method or toString method of the object should be executed first for quasi-conversion according to different circumstances. This is a reference to JavaScript’s deep headache with type conversions (above), and implicit conversions, such as the + and == operators, are more likely to be converted to strings, and the == operators are more likely to be converted to numbers. This will be covered in JavaScript’s deep headache of type conversions (part 2)… But I’m still writing… In general, when answering the conversion question, it is best to refer to the specification, indicating that you have specifically looked at the specification while researching the topic. I’ve already learned a lot about conversion instructions, but you can expand on that. For example, when I was learning conversion, I also studied how to fancy the 26 letters, such as printing a sentence on the console:

[[] [0] + [[]]0] [5[[[] [] + [[]0] + [[]]0] [4[[]] + [0] + [[]]0] [5[[]] + [0] + [[]]0] [1[[]] + [0] + [[]]0] [2]] + [[]]0] [8[[]] + [= = []] of [0] + [[]]0] [2[[[] [] + [[]0] + [[]]0] [4[[]] + [0] + [[]]0] [5[[]] + [0] + [[]]0] [1[[]] + [0] + [[]]0] [2]] + [[]]0] [6[[[] [] + [[]0] + [[]]0] [4[[]] + [0] + [[]]0] [5[[]] + [0] + [[]]0] [1[[]] + [0] + [[]]0] [2]] + [[]]0] [23[[]] + [0] + [[]]0] [3[[[] [] + [[]0] + [[]]0] [4[[]] + [0] + [[]]0] [5[[]] + [0] + [[]]0] [1[[]] + [0] + [[]]0] [2]] + [[]]0] [8] + [+ [1+ [[] [0] + [[]]0] [3] +309] [0] + [[]]0] [7[[[] [] + [[]0] + [[]]0] [4[[]] + [0] + [[]]0] [5[[]] + [0] + [[]]0] [1[[]] + [0] + [[]]0] [2]] + [[]]0] [6[[]] + [0] + [[]]0] [0]
Copy the code

Fancy letters can also be explored, although it may seem boring, as a small example of your interest in technology.

What happens when [various companies] enter the URL

The core of this question is asking what happens from entering the URL to rendering the page.

In terms of time consuming process, it can be divided into DNS resolution, TCP connection, HTTP request and response, client browser resolution and rendering, and connection termination. Among them, browser parsing rendering includes THE parsing of HTML morphology, syntax, CSS parsing, DOM tree generation, rendering tree establishment, screen rendering.

Some of the more important processes are described below.

The DNS

When we type something like www.taobao.com into a browser, DNS resolution acts as a translator, “translating” web addresses into IP addresses. DNS resolution is the process of translating domain names into IP addresses. Domain name resolution is also called domain name pointing, server setup, domain name configuration, reverse IP registration, and so on. To put it simply, the DNS server resolves the domain name to an IP address, and then binds a subdirectory to the domain name on the host of the IP address.

A TCP connection

The important purpose of TCP connection is to ensure the order of messages and not to lose packets. To establish reliable data transmission, both parties of TCP communication inform each other of the initial sequence number and confirm that the ISN has been received. The whole connection process is commonly known as the three-way handshake.

HTTP request and response

HTTP requests occur mainly on the client. The process of sending HTTP requests is to construct HTTP request packets and send them to the specified port on the server through TCP.

For example, www.taobao.com.

After entering the URL in the address bar, the browser analyzes the URL and sends a request packet. Request message including line (including the request, the method of path and the protocol version), request header (contains some additional information request, generally in the form of key-value pairs), empty line (agreement stipulated in the request header and must be separated by a blank line between the main body), request body (for a post request, the parameters are not needed to put in the url, You need a carrier, which is the request body. After receiving the request, the server will perform corresponding processing according to the path matched by the URL, and finally return the page resources required by the browser. After processing, the browser receives a response message, and the required resources are in the message body. Similar to the request packet, the response packet also has corresponding start line (the start line of the response packet also contains the protocol version, but different from the start line of the request packet, it also contains the status code and the cause phrase of the status code), response header (corresponding to the request header in the request packet, the format is the same. But each has a different header), blank line, message body (the resources required by the request), the difference is that they contain different things.

HTML lexical, syntax parsing

HTML to us is really a bunch of strings, but what we’re really dealing with is a stream of characters. In order to parse the character stream into a correct browser-aware structure, we need to do two things:

Lexical analysis: the initial parsing of the character stream into “words” that we can understand, which is called token.

Syntax analysis: start and end tag pairing, attribute assignment, parent-child relationship connection, form a DOM tree.

HTML structures aren’t that complicated, and most of what we see are tags, attributes, comments, and CDATA nodes.

The screen to draw

DOM tree generation and rendering tree building is a little bit easier to understand so I’m not going to expand this. Once the “two trees” are constructed, the screen is drawn.

During rendering, the render tree is traversed, the paint() method of the browser’s UI component is called to display the corresponding content on the screen, and CSS styles (geometric information such as the size and position of each node in the page) are calculated based on the render tree layout.

HTML by default flows from top to bottom, and the addition of CSS and JS breaks that up, changing the look and feel of the DOM as well as its size and position. This leads to two very important concepts: replaint redraw and reflow rearrangement.

Replaint: A part of the screen is redrawn without affecting the overall layout, such as a CSS with a changed background color, but the geometry and position of elements remain the same. Eflow rearrangement: means that the geometry of the component has changed and we need to revalidate and evaluate the render tree. Part or all of the render tree has changed. Both redraw and rearrange are “costly” to the browser, so we should try to minimize both.

The principle of CDN

The basic principle of CDN is widely used in a variety of the cache, the cache server distribution to the user to access relatively concentrated area or in the network, when users visit the web site, using the global load technology to the user’s access point to the nearest work cache server, directly by the cache server response to user requests. The simplest CDN network consists of one DNS server and several cache servers. When a user enters the URL and presses Enter, the local DNS system resolves the domain name to the CDN dedicated DNS server pointed by the CNAME, and then obtains the IP address of the global load balancing device. User access request send content to the global load balancing device, the global load balancing device in real time according to the network traffic and connection at each node, load condition and the distance to the user and the integrated information such as response time will the user’s request to guide users closest service node, the user can obtain the content, to the nearest Solve the Internet network congestion, improve the response speed of users to visit the website

How does the performance monitoring platform catch errors

It is generally considered from the following two aspects:

1. Global capture:

Capture code is centralized in one place with a global interface. The interfaces available are:

  1. Window. The addEventListener (” error “)/window. AddEventListener (” unhandledrejection “)/document. AddEventListener (” click “), etc
  2. Framed-level global listening. For example, the AIXOS uses the Interceptor for intercepting. Vue and React have their own error collecting interfaces
  3. The global function is wrapped to automatically catch exceptions when the function is called
  4. Example method rewrite (Patch) to cover the original function, such as console.error rewrite, can also catch exceptions while using the same method

2. Single point capture:

Wrap a single block of code in business code or dot a logical flow for targeted exception catching:

  1. The try… catch
  2. Write a special function to collect exception information and call it when an exception occurs
  3. Write a special function to wrap around other functions, resulting in a new function that behaves exactly like the original function, except that it can catch exceptions when they occur

Note: For details, please refer to “Front-end Exception Monitoring Solution Research” published by Fundebug.

[Tencent side] performance optimization from what aspects start?

• Split screen loading. When the page needs to render a lot of data, render the first screen first, and then load the data of the second screen when sliding down; • Image size optimization, minimizing the image size without affecting the visual effect; • Lazy loading of pictures, load pictures when on Appear; • Code splitting, or unpacking, means that some components in an app do not need to be imported immediately, but can be dynamically imported. When packaging, you can also split them into different bundles to make the Index bundle smaller. • Chrome DevTools-Trace & Timeline and other powerful analysis tools can be studied, which can be used to analyze application performance issues in the kernel;

How to speed up the first screen rendering, what are your plans?

  • Reduce request volume: merge resources, reduce HTTP requests, Minify/gzip compression, webP, LazyLoad.
  • Speed up the request: pre-resolving DNS, reducing the number of domain names, parallel loading, CDN distribution.
  • Add cache: HTTP cache request, offline cache MANIFEST, offline data cache localStorage, PWA.
  • Rendering optimization: first screen content minimization, JS/CSS optimization, loading order, server rendering, pipeline.

[Tencent side] Webpack for modular do processing

This section suggests reading the description of Library and libraryTarget in the Webpack4 documentation. When we develop a JS library, usually the final NPM package needs to output some components or apis. At this time, we need to understand the modular packaging capability provided by Webpack4. By setting libraryTarget, we can package our projects as AMD, UMD, or commonJS modules. Webpack.js.org/configurati…

Give an overview of processes and threads in Node.js

The Process in Node.js is a global object that does not require direct use and provides us with information about the current Process. Processes in Node.js can be created using the child_process module.

Relationship:

  • A thread can only belong to one process, and a process can have multiple threads, but at least one thread (usually called the main thread).
  • All threads of the same process share all resources of that process.
  • Collaborative synchronization is required during execution of a process. Synchronization between threads of different processes is achieved by means of message communication.
  • The processor is assigned to threads, that is, threads are really running on the processor.
  • A thread is a unit of execution within a process and a schedulable entity within a process.

The difference between:

  • Scheduling: Thread as the basic unit of scheduling and allocation, process as the basic unit of owning resources.
  • Owning resources: A process is a separate unit that owns resources. Threads do not own system resources, but can access resources belonging to the process.

[Bytedance] When the mouse scroll, will trigger many events, how to solve the problem?

The method of choice here should be throttling, which can be extended to talk about anti-shake and throttling. Anti-shake means that the event is executed once in a row, and the event can only be executed after N seconds. Throttling means that if you keep firing the event, you only execute the event once in a certain period of time. Functions like underscore (for preventing multiple button clicks) and throttling (for listening for scroll events) can be implemented using the same implementation in the underscore code, I have written previously about how underscores are implemented in JavaScript underscore and JavaScript Underscore