Unlocking the mechanics behind the browser

 The “Heart” of the Browser

The reason why code renders differently in different browsers is due to inconsistencies in the browser’s kernel, which determines how the browser interprets the syntax of a web page.

 The browser kernel can be divided into two parts 

 The rendering engine contains the 

 Unlocking the browser rendering “black box”

Q : What is the rendering process ? A : Simply put, the rendering engine converts resources into image results based on the html file description.

 Some of the more important parts of this are

• 
  HTML interpreter: outputs html documents to the DOM tree after lexical analysis.
• 
  CSS interpreter : parses css documents, generates style rules
• 
  Layer Layout Calculator : Layout calculates the exact position and size of each object.
• 
  View Drawing Module: performs specific image drawing, rendering pixels to the screen.
• 
  javascript engine : compile execute js code

 Browser Rendering Process Explained

• 
  Parsing HTML In this step the browser performs all of the loading and parsing logic, and in the process of parsing the HTML makes various requests for external resources needed to render the page.

• 
  Calculating styles The browser recognizes and loads all the CSS style information and merges it with the DOM tree to produce the page render tree (pseudo-elements such as :after :before are built into the DOM tree at this point).

• 
  Calculating Layer Layout The relative position information, size and other information of all elements on the page are calculated in this step.

• 
  Drawing Layers In this step the browser converts each page layer to pixels and decodes all media files based on the results of our DOM code.

• 
  Integrate layers to get the page In the last step, the browser will merge the layers and output the data from the CPU to the GPU to be drawn on the screen. (Complex view layers will put some pressure on GPU computation at this stage, and in practice we sometimes manually differentiate between different layers in order to optimize animation performance).

 A few important “trees”

• 
  DOM Tree: Parsing HTML to create a DOM tree: The rendering engine starts parsing the HTML document, converting the tags in the tree to DOM nodes, which is called the “content tree”.

• 
  CSSOM Tree: The CSSOM tree is created by parsing CSS, including external CSS files and style elements.The CSSOM parsing process is parallel to the DOM parsing process.

• 
  Render tree: CSSOM is combined with DOM and what we get after that is the Render tree.

• 
  Layout of the render tree: Recursive call from the root node, calculating the size, position, etc. of each element, to the exact coordinates of each node should appear on the screen, we will get the layout of the render tree (Layout of the render tree) based on the render tree.

• 
  Painting the render tree: Traverse the render tree and each node will be painted using the UI backend layer. The whole process is called Painting the render tree.

Rendering process: First, a DOM tree is constructed based on HTML, which is combined with the CSSOM parsed by the CSS interpreter to create the layout rendering tree. Finally, the browser uses the layout tree as a blueprint to compute the layout and draw the image.

Whenever a new element is added to the DOM tree, the browser uses the CSS engine to look through the CSS stylesheet, find the style rules that match the element, apply them to the element, and then redraw it.

 css optimization recommendations

#myList li {
  /*  */
}

CSS selectors match from right to left. The actual overhead of this selector is quite high: the browser has to iterate through every li element on the page, and each time it has to make sure that the id of the li element’s parent is not myList.

Wildcards are also a performance-hungry selector, as they iterate over every element on the page.

Say Goodbye to Blocking: Load Order Optimization for css and js

html css js all have blocking rendering properties

 css blocking

Because DOM Tree + CSSOM = Render Tree so as long as the css isn’t loaded it won’t go backward in the rendering process.

The CSSOM is built when the html is parsed to the <link /> 和 <style /> tag. So you can advance the build time as much as possible.

 For example :

•  Placement in <head /> (as early as possible)
•  Enable CDN (as soon as possible)

 js blocking

The role of js is at  , which essentially modifies the DOM and CSSOM, so JS execution will block.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS Test</title>
    <style>
      #container {
        background-color: yellow;
        width: 100px;
        height: 100px;
      }
    </style>
    <script>
      var container = document.getElementById("container");
      console.log("container", container);
    </script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var container = document.getElementById("container");
      console.log("container", container);
      console.log(
        "container bgColor",
        getComputedStyle(container).backgroundColor
      );
    </script>
    <style>
      #container {
        background-color: blue;
      }
    </style>
  </body>
</html>

 The result of the run is

container null
index.html:26 container <div id=​"container">​</div>​
index.html:28 container bgColor rgb(255, 255, 0)
index.html:63 Live reload enabled.

 JS behaves the same way when it is an external file.

The first DOM fetch fails, which means that js is blocking the DOMTree generation. The second DOM fetch succeeds (as expected), but the css fetch gets the color yellow instead of the blue that was configured later, which proves that CSSOM is also blocked.

 How js is loaded

•  normal mode

 This mode blocks the

<script src="./index.js" />

•  async mode

In async mode, JS doesn’t block the browser from doing anything else. It loads asynchronously, and when it finishes loading, the JS script is executed immediately.

<script async src="./index.js" />

•  defer mode

In defer mode, JS is loaded asynchronously and execution is deferred. Only when the whole document is parsed and the DOMContentLoaded event is about to be triggered will the JS files marked as deferred start to be executed sequentially.

<script defer src="./index.js" />