This is the 15th day of my participation in the August Text Challenge.More challenges in August

TIP 👉 Rice sparse food, drinking water, humeral and pillow, music is also in it. Unjust and rich and precious, to me like floating clouds. — Analects of Confucius

preface

This is a very easy starting point for performance optimization interview questions, and you need to pay attention to it.

What does a rendering engine do

The rendering engine’s job is to render, that is, to display the requested content in the browser window. By default, the rendering engine displays HTML and XML documents and images. Other types of content can also be displayed through plug-ins (or browser extensions); For example, PDF documents can be displayed using the PDF viewer plug-in. But in this chapter, we’ll focus on its main purpose: to display HTML content and images formatted with CSS.

Different browsers have different rendering engines, and Firefox uses Gecko, a “homemade” rendering engine from Mozilla. Safari and Chrome both use WebKit.

Render engine workflow parsing

The middle “rendering engine processing” actually includes the following specific processes:

Taken as a whole, these five processes accomplish the following tasks:

1. HTML parsing

In this step, the browser parses the HTML document and in the process makes requests for various external resources needed for page rendering.

2. CSS parsing

The browser recognizes and loads all CSS style information.

3. Merge style and structure

The style information is combined with the document structure, resulting in the render tree of the page (pseudo-elements such as :after :before are built into the DOM tree at this point).

4. Layout stage

The relative positions and sizes of all elements on the page are computed in this step.

5. Page rendering

In this step, the browser will convert each page layer into a pixel and decode all the media files based on the results we have processed previously.

These five processes correspond to the following five products:

  • The DOM tree
  • CSSOM tree
  • Render tree
  • The box model
  • Target interface

Example:

HTML parses the DOM tree

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> < span style> 20 px; } div { width: 100px; height: 100px; } span { color: #000; } p { display: None} </style> </head> <body> <div class="box1"> <span> I am in box1 </span> </div> <div class="box2"> <span> </div> <p> Test Test test </p> </body> </ HTML >Copy the code

The DOM tree:

CSS parses the CSSOM tree

CSSOM also has a tree structure, and in the style calculation, the browser always starts with the most general rule that applies to that node. For example, if a div node is a child of the body element, it should have all body styles, recursively detailing the specific style layer by layer. Specific tree structure:

DOM tree and CSSOM tree “fit” ———— render tree

When both the DOM Tree and the CSSOM Tree are parsed, they are combined to create the Render Tree.

  • Start at the root of the DOM tree. Filter out all visible nodes
  • Match CSS rules in CSSOM for visible nodes only
  • Emission visible node

Render tree:

Layout box model

Figuring out where the node should appear in the browser viewport and how much space it should occupy is what you do during the layout phase. The browser traverses the render tree, writing the nested relationships between elements to the document stream as a box model:

The box model calculates the exact size and positioning of elements during layout. After the calculation, the corresponding information is written to the rendering tree, forming the “layout rendering tree”. At the same time, each element box also carries its own style information, which can be used as a basis for subsequent drawing.

Target interface

At this point, nothing is actually displayed in the browser window. The render tree and box model are all in memory. After the layout stage, the browser finally has all the information it needs to draw the page. At this point, it will render each node in the tree into a pixel that we can see, and finally the page in front of us. This process is called “drawing”. After drawing, the interface appears on the interface: