What happens when the browser presses Enter
"Establishing is based on studying first, and studying is based on studying"
01 Preface
This article is actually about the rendering principle of the browser. Although ordinary users operate the browser only to pay attention to whether the page can be displayed, as a front-end programmer, it is necessary to pay attention to how to troubleshoot if the exception is displayed.
In fact, when you study in depth, you will find that the intermediate process is more complicated than we thought. It includes a series of processes such as IP address resolution, DNS server query, and server response. Below, I will analyze how the browser works.
02 Response process
From my own summary, it can be divided into the following processes:
- IP address lookup
- Establish TCP connection
- Server processing
- Response back
- Page rendering
IP address lookup
Suppose we enter www.baidu.com on the page, so how do we get Baidu's IP address? Let me first insert a small episode. In fact, there are multiple IP addresses of Baidu servers. For search engines, there are huge amounts of visits every day, and there must be load balancing processing, otherwise it will crash and hang up.
The IP address query is actually obtained in a few steps
- First, the browser queries its own DNS cache
- If not, I will go to the operating system to find it, and also find out whether the host of this machine has a cache
- If not, I will go to the router to find
- If you do n’t have one, go to the local domain name server, usually a local service operator, such as China Telecom
- The operating system will get the IP address and cache it
- The browser gets the IP address returned by the operating system, which is also cached
Once here, the browser will get the IP address of www.baidu.com, and then the address will be accessed and connected.
Establish TCP connection
The most important thing to establish a TCP connection is to perform three handshake
Before sending data, it will encapsulate the data through layers of the network protocol, through the application layer, transport layer, network layer, link layer. When the server receives the data, it will unpack the data and finally get the HTTP data. We know that the TCP / IP layered model is generally divided into the following layers (Figure), and each layer has a different protocol corresponding to it, ensuring the transmission of data.
So what protocols does each layer correspond to?
Application layer : determines the communication activities when providing application services to users. Such as FTP (File Transfer Protocol), DNS (Domain Name System), HTTP (Hypertext Transfer Protocol), Telnet (Network Remote Access Protocol), etc.
Transport layer : The transport layer provides data transmission between two computers in a network connection to the upper application layer. Provide TCP (Transmission Control Protocol) and UDP (User Datagram Protocol) two protocols, mainly for data formatting, data confirmation and data loss retransmission.
Network layer : used to process data packets flowing on the network. A data packet is the smallest unit of data transmitted over the network. It stipulates how to reach the other party's computer and transfer data to it. The network layer transmits the data packet to the other party through the IP protocol. The IP address indicates the address to which the node is assigned, and the MAC address refers to the address to which the network card belongs (generally it will not be changed). In the IP layer, the corresponding MAC address will be obtained through ARP (Address Resolution Protocol).
Link layer : handles the hardware part connected to the network, including the physical visible part of the control operating system, hardware device drivers, network cards, and optical fibers. The hardware part depends on the MAC address.
Server processing
When the data arrives at the server, it will be parsed. The processing result will return a status code. Common status codes are as follows:
- 200 OK: The client request was successful
- 400 Bad Request: The client request has a syntax error that cannot be understood by the server
- 401 Unauthorized: The request is unauthorized. This status code must be used with the WWW-Authenticate header field
- 403 Forbidden: The server receives the request, but refuses to provide the service
- 404 Not Found: The requested resource does not exist
- 500 Internal Server Error: An unexpected error occurred on the server
- 503 Server Unavailable: The server is currently unable to process the client's request, and may return to normal after a period of time
Response back
When the browser receives the data returned by the server, it will preprocess the data and perform different processing according to the status code. For example, the 403 status code will allow the browser to use the cache without re-requesting. If it is a 200 status code, it may be a new request, and the browser may decompress the resource and cache the resource. The last step is to parse the resources and render the page.
Page rendering
When the browser receives the data, it will perform the following steps:
- Parse HTML files and convert to DOM tree
- Parse CSS files and convert to CSSOM tree
- Production render tree
- Send information to GPU, composite rendering
We know that the transmission of the computer is transmitted with 0101 data, so that the data we receive is also in this format, we must parse it. First convert the byte data into a string, which is our code. Then the lexical analysis of the string is converted into a token, and this process is tokenization. The next step is to convert the tags to Node, and finally build a DOM tree based on different connections.
The principle of parsing CSS is the same, the parsing of the two trees is parallel.
The last is the operation of merging the two trees. Note that the rendering tree will ignore those nodes that do not need to be displayed. For example, the style of the node is set to: display: none;
03 Redraw and Reflow
Redraw and reflow affect the analysis process of the two trees, so what is redraw and reflow?
- Redraw
When we modify some styles of the DOM, such as changing the text color or background color, these browsers do not need to recalculate the geometric properties, and draw new styles directly.
- Backflow
When we modify the geometric properties of the DOM, generally the width and height of the element are modified, the browser will recalculate the position and then redraw it.
So how do we avoid it?
- Reduce the use of absolute positioning and use transform instead
- Reduce the use of display, use visibility instead
- css style to avoid too much node nesting, the matching rule is from right to left
04 blocking rendering
Because the JS operation is single-threaded, when we parse HTML code and JS code, there will be a conflict. Our expectation is to render the page first, and then execute the JS code. So we must pay attention to the following things:
- Put the <script> tag at the bottom
- Put the style file on top to prevent the page from "streaking"
DOM parsing and CSS parsing are two parallel processes, CSS loading will not block DOM parsing
Since the rendering tree depends on the DOM tree and the CSSOM tree, you must wait until the CSSOM tree construction is completed, that is, the CSS resource loading is completed (or the CSS resource loading fails) before you can start rendering. Therefore, CSS loading will block the rendering of the DOM.
05 Summary
For this part of the browser rendering principle, interviews are also often taken, the front end must be very familiar with this one. This piece is very deep. For the optimization of the project, you can refer to the above process. Only when each process reaches the optimal state, the performance is the best.
In fact, there are still many knowledge points that have not been explained. Readers can search for them according to their needs. The overall direction is the above process.
