preface

In daily during the development process, good enough to write performance code, application of structure is more stable, we should not only have in-depth knowledge of the execution mechanism of javascript, more want to have a deeper understanding of its host environment, understand the working principle and structure, it can help us to web operation mode has a higher level of cognitive world. This time I want to introduce the browser rendering engine.

Browser architecture

Before getting into the specifics of the rendering engine, let’s take a look at the architecture of the browser and see what role the rendering engine plays in the browser. For the composition of the browser, see the following figure:


  1. The User interface is the visual appearance of the browser, including its address entry bar, forward and backward keys, bookmarks menu bar, and so on.
  2. The Browser engine handles the interaction between the User interface and the Render engine.
  3. Rendering Engine, the focus of this article, is the Rendering engine that parses HTML and CSS and renders the parsed content to the screen to create web pages.
  4. Networking is the layer of the browser that handles XHR and other requests. I’ll write an article about it later.
  5. Javascript Engine, which is responsible for runtime processing of Javascript. I’ve written two articles about it, specifically on memory management and asynchronous execution. If you haven’t seen it, see my column.
  6. Data persistence, Data persistence, namely the browser’s local Data storage, the current browser supports several local Data storage way include localstorage indexDB, webSQL and FileSystem. Now that we understand the role of the rendering engine in the overall browser, let’s go back to the rendering engine itself and see how it performs page rendering.

Rendering process

After the rendering engine receives the page document content from the network layer, the general parsing process is as follows:

The dom tree structure

First parse the HTML to form a DOM tree, assuming the following HTML document content:

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="theme.css">
  </head>
  <body>
    <p> Hello, <span> friend! </span> </p>
    <div> 
      <img src="smiley.gif" alt="Smiley face" height="42" width="42">
    </div>
  </body>
</html>
Copy the code

After parsing, the dom tree structure diagram is as follows:





Cssom tree

Cssom refers to the CSS object Model. When a browser parses HTML, if it encounters a link tag in the head that connects to an external CSS file, the browser will immediately initiate a request to obtain the content of the CSS file. Note that retrieving and parsing CSS files does not block HTML parsing, but the content of script tags, whether downloaded or executed, blocks HTML parsing. Suppose the CSS content on the page looks like this:

body { 
  font-size: 16px;
}

p { 
  font-weight: bold; 
}

span { 
  color: red; 
}

p span { 
  display: none; 
}

img { 
  float: right; 
}
Copy the code

The browser converts it to the following CSSOM tree:


Render tree

Once the above two tasks are done, the RENDER tree can be generated by combining the DOM tree with the CSSOM tree. What exactly is a Render tree? Why paint with render trees instead of dom and CSSDOM trees? It is good to wonder that the render tree is actually a tree structure of visible elements with style presentation in their document order, which is generated to ensure that elements are rendered in strict accordance with the document flow order and style rules. Rener Tree is shown as follows:

layout

Layout is a recursive process. It starts from the root element, that is, the HTML element. The coordinate system of position calculation is also relative to the root element, and the HTML element coordinates are (0,0). Subsequent calculations may be partial updates or total replacements. When the layout process is complete, it means that each node has the coordinates of its position on the screen, and the actual rendering process can begin.

painting

At this stage, the browser displays the entire document structure on the page. Like layout, painting can be partially updated or completely updated. This depends on your DOM manipulation mechanism. Painting is a gradual process and for a better UX experience, the rendering engine does not wait until all the HTML has been parsed, but rather paints the part that has been parsed first and then paints the rest. Now that the entire execution process of the rendering engine is over, we have learned about the execution mechanism of the rendering engine. Let’s take a look at what aspects we can start to optimize the page to get a better user experience.

About Performance Optimization

From a rendering engine perspective, there are five ways to optimize performance.

  1. Javascript, we need to pay more attention to the operations that will cause visual changes in the process of JS code writing, such as DOM operations, especially in single-page applications, such scenes are more common. My recommendations for javascript optimization are:
  • Avoid using timers such as setTimeout or setInterval for visual updates, as their execution mechanism is imprecise and may be far from the desired timing.
  • Hand over the computationaloperations to Web workers, because the execution of JS blocks page updates and responses to user interactions.
  • If you need to manipulate the DOM asynchronously, use microTask, such as mutationObserver.
  1. CSS, in the CSS writing process to minimize the complexity of the selector, compared to an element to determine its style rules, element selector calculation takes 50% more time.
  2. Layout. During layout, the browser needs to determine the coordinates and dimensions of each element, which means layout is a computationally intensive process, so we need to minimize the repeated triggering of layout. For layout, my optimization suggestions are as follows:
  • Reduce operations on attributes that affect the position and size of an element, such as width,height,left,top, and so on, and cause the browser to redo the layout.
  • Use flexbox for layout whenever possible, which has better performance advantages than traditional box-based layouts.
  • Avoid forcing layouts to fire. Browsers have native optimization mechanisms for DOM operations and property changes. They wait for the right time to do multiple operations together to avoid triggering layouts too often. It immediately triggers the layout, which we want to avoid as much as possible.

conclusion

This article mainly introduces the browser rendering engine execution mechanism, relatively speaking, is a very partial to the basic knowledge of the article, is also LZ I recently on the front end of the foundation to comb the review of a thinking summary, I hope will also be helpful to you.