When I first came into contact with the front-end, I read many similar articles, but because the knowledge points mentioned in the article have not been touched or understood by myself, so I read it down now, and then I forget it, and I will summarize it again after working. .
The following processes will be mentioned here:
-
Query cache
-
DNS domain name resolution
-
Establish a TCP connection
-
Send an HTTP request to the server and return the result
-
Browser parses HTML
-
Browser layout rendering
Take baidu.com as an example. When we enter the URL on the browser, we actually need to request the content we want from the server.
Query cache
Here, I want to mention one thing about caching. When a client initiates an HTTP request, it will not be sent to the server immediately, but will find a match from the browser cache.
The browser cache is divided into negotiated cache and mandatory cache. When the browser initiates an HTTP request, it will first judge whether there is a strong cache based on the HTTP request header. If there is a strong cache and it has not expired, the hit will be returned. Will initiate a request like a server again. If the strong cache does not hit, it will continue to initiate a request like the server, but before formally initiating a request to the server, there will be a series of preparatory actions. DNS domain name resolution will be mentioned here.
DNS domain name resolution
When entering the url before making a request to the server, the browser must first determine where the server corresponding to this domain name is. The conversion of a domain name into a server address is done by a DNS resolver.
When the client receives the domain name, it will first find it from our local HOSTS file and check whether the file has a corresponding relationship between the domain name and IP (so we generally develop or test, we can access the development environment and test environment by configuring the HOSTS file. , The purpose of returning to the environment), if the local HOSTS file has this relationship, then press this IP to access the server;
If not, then go to the local DNS resolver cache, if the relationship exists, then return the result and complete the DNS resolution;
If it still doesn't, first find the preferred DNS server set in the TCP/ip parameters, that is, the local DNS server, and return if there is such a mapping relationship;
If it does not exist, request the root DNS server -> com DNS server (judging by domain name) -> baidu.com DNS server (if the local DNS server has a forwarder, the root DNS server is not requested, and it is forwarded directly to the upper level DNS The server parses and returns).
(The following pictures refer to the principle of DNS and its resolution process)
Establish a TCP connection
Generally speaking, after getting the DNS resolution, before making a request with the server, we need to establish a connection with the server first. Here we will mention the three-way handshake of TCP:
-
The client sends a SYN packet to the server
-
The server receives the data packet from the client and returns a SYN/ACK data packet to the client
-
After the client receives the return from the server, it sends an ACK packet to the server, indicating that the handshake is over and the connection is successful
Initiate a request to the server and return the result
When the connection is successful, you can formally initiate a request to the server. If this request is the first time to access the server, the cache identifier will not be included in the request header, and the server is directly requested to return the latest content, but if the server is returning a message It tells the client that the response data needs to be cached this time. At this time, it may be a strong cache identifier or a negotiated cache identifier. If it is a strong cache, the next time it is accessed, as we said at the beginning, start with the cache. Check back inside;
We will continue to talk about the negotiation cache. The second request header contains the time when the browser requested the resource last time and a resource check code (generated using resource modification time, resource size and other information), and the server receives After this request, it will be judged whether the negotiated cache has expired, if it expires, it will return the new resource information, if it has not expired, it will return a 304 status code, indicating that the resource has not been updated and the resource in the cache can be used.
Browser parses HTML
When the service receives our request to baidu.com to return the HTML file to us, the result is an example. How does the browser render the HTML content and present it to the user?
After the browser receives the HTML code returned by the server, it needs to parse it. The browser uses a state machine for lexical analysis. There are 80 states specified in HTML. The received characters are judged one by one, and the successfully matched characters are divided into Independent state, then merge all the characters in the independent state to form a connected graph, parse the character stream through lexical analysis to get words, and then build these words into a DOM tree, you need to use the stack to parse the elements through grammatical analysis Stack, and finally build into a DOM tree, and the browser will try to process the whole process from top to bottom in a streamlined manner. Each time an element is parsed, it will match its style rules, and then cover and cover according to the priority of the rules. Adjust to generate a CSS rule tree. This is why our CSS selector does not have a child-parent selector. This also shows that the CSS parsing process does not block the DOM parsing. Which one will cause DOM parsing?
HTML code often introduces some additional resources, such as pictures, CSS, JS, etc., pictures and CSS generally need to be downloaded from the Internet or read from the cache, these resources usually do not block HTML parsing, because they will not affect The DOM tree is generated, but when the script tag is encountered during the HTML parsing process, the HTML parsing will stop and the JS script will be loaded and executed. This is because the browser does not know whether the execution of this JS will change the current HTML structure , Which is why JS scripts are generally placed at the bottom or add async or defer attributes to load JS asynchronously. (Picture referenced from the relearning front end of winter at geek time)
Browser layout rendering
When the HTML parsing is complete, we can get a DOM tree and a CSS rule tree. At this time, we need to merge into a rendering tree. In order to build the rendering tree, the browser is roughly completed:
-
Start traversing every visible node from the root node of the DOM tree
-
Match each visible node to its CSS rules
-
Build the render tree together with the rules
Once we have the render tree, we will start the layout. So far, we only know the nodes and styles of this render tree, but we don’t know the position and size of the visual window on the client. This is what we want The mentioned layout is automatically rearranged. In order to know the exact position of the element, the browser starts to traverse the root node again, and all elements will be calculated in absolute pixels at the exact position and size of the viewport.
At this time, we can replace each node on the render tree with actual pixels on the device. This step is usually called drawing or rasterizing. One point is to be mentioned here: Why do you want to reduce the execution of DOM operations, because DOM operations will cause rearrangement, because every triggering rearrangement will cause drawing.
reference: