This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Hi, I’m Dudu, and today we’re going to talk about the browser rendering process. This question is often asked in interviews: What happens from the time you enter a URL to the time the browser completes rendering?

The rendering process is actually quite complex, and we need to understand and be familiar with the process

Process of occurrence

Enter the URL in the browser address bar and press Enter.

  1. The browser looks up whether the current URL is cached and compares whether the cache is expired
  2. The DNS resolves the IP address of the URL
  3. Establishing TCP connections based on IP (three-way handshake)
  4. Sending an HTTP request
  5. The server processes the request and the browser accepts the HTTP response
  6. The browser parses and renders the page
  7. Closing the TCP connection (four-way handshake)

Find the cache

The browser first looks up the cache, just like if you want to go to a place, the first thing you have to think about is whether you have been there, if you have not been there, you have to follow the navigation step by step, so the browser is the same.

Check whether the address page exists in the browser cache => system cache => route cache. If yes, the page content is displayed. If no, go to the next step.

  • Browser cache: The browser keeps DNS records for some time, so it is only the first place to resolve DNS requests;
  • System cache: If this record is not included in the browser cache, the system will call the operating system to obtain the operating system record (saving the recent DNS query cache).
  • Router cache: If the preceding two steps fail to obtain DNS records, continue to search the router cache.

Finally, if all three caches are found, continue to search for ISP

The DNS

DNS resolution refers to domain name resolution, which refers to the domain name pointing to the spatial IP address of the website, that is, the digital address. The main function of domain name resolution is to facilitate memory.

So why parse?

Because in network communication, most are TCP/IP, and TCP/IP is based on IP addresses, so computers can only identify IP addresses (such as 202.97.111.101) on the network, but not domain names

TCP link

After that, TCP connections are made to the server through IP and the default port 80

For details on how to link to this article you can see the TCP three-way handshake and four-way wave in depth practice

How does the browser parse and render the page

We know that there is a JS engine for executing JS, so there is a rendering engine for executing render. Also, rendering engines are not the same across browsers.

For example, it’s called Gecko in Firefox, and it’s based on WebKit in Chrome and Safari.

The process diagram:

We can see that in the picture

  • First, convert the HTML to HTML ParserDOM tree, and the CSS is converted to by CCS rules and CSS parsersCSSDOM tree
  • And then combine the two to form the finalrender tree(Note: we don’t know what the HTML is or where it is.)
  • Then throughlayoutYou can calculate exactly the width, height, position, and color of the DOM to displaypaintDraw pictures and present the content

How do I turn HTML into a DOM tree

We know that when we write code, we break it up into HTML files, CSS files, JS files, which are strings, but computer hardware doesn’t understand these strings, and in fact, what’s going on over the network is actually zero and one bytes of data.

When the browser gets those bytes of data, it converts them into the corresponding string, which is the code we wrote.

The browser then parses these strings into tokens, a process called tokenization

So why label it? The reason is that you end up breaking the code into pieces and labeling them so you can understand what the code means.

Such as:

When the tag ends, it is immediately converted to nodes, which then form a DOM tree

To summarize the process: Byte data => String => Token => Node => DOM

How do I convert CSS to a CSSDOM tree

This is very similar to how HTML is converted into a DOM tree: Byte data => String => Token => Node => CSSDOM

Note that the browser determines what the style of each node is, and that this process is very resource-intensive.

Here’s a simple example:

   <div>
       <p> <span> </span> </p>
   </div> // Render styles, respectivelyspanRender // firstspan{
       color: red} //div > p > span{
       color: red
   }
Copy the code
  • In the first case, the browser simply finds the corresponding SPAN tag
  • In the second case, the browser needs to find all of the SPAN tags, then the P tag of the SPAN tag, then the div tag above it, and then color tags that match this rule, which becomes complicated

How to render into the final Render tree

When we get a DOM Tree and a CSSDOM Tree, we need to combine the two trees. This process is not a simple merging of the two trees.

One thing to note

  • The Render Tree contains only the nodes that need to be displayed and the style information for those nodes, such as styleDisplay: noneAnd no longerRender TreeIn the show
  • When the browser generates the render tree, the layout is based on the render tree (also known asbackflow), and then call the GPU to draw, synthesize the layer, and display it on the screen. (This part of the content is too low-level, but also involves hardware related knowledge)

End

Therefore, the browser rendering has been completed, I believe you have understood the process, click like 👍🏻 if you like, support it. (●￣(日 本 国 日 本 日 本)