I was asked about the headline interview before. Although it is not relevant to the position, I still want to understand it as common sense. This part of the content of a record, comb and summary.

· First, what is a browser rendering engine? The browser rendering engine renders what the browser displays. By default, the browser rendering engine can display

Shows HTML, XML documents, and images. If you need to display other content, for example, the browser can now open a PDF file directly, these functions are not native to the browser

Is installed in the browser PDF reader plug-in to display PDF files. This article summarizes the main use of rendering engines – display CSS applications

After the HTML and images.

The major browsers, Chrome and Firefox, are built on both rendering engines. Firefox uses Geoko, Mozilla’s own rendering engine,

Chrome uses Webkit.

Main rendering process

· The requested document content is first obtained in 8K chunks.

· Parse HTML to build the DOM tree –> build the Render tree –> layout the Render tree –> draw the Render tree

Note:

1.DOM tree: The browser parses HTML into a tree of data structures

2.CSS Rule tree: The browser interprets the CSS into a tree data structure

3.Render tree: Merge CSSOM and DOM into a Render tree

4. With the Render tree, the browser already knows what nodes are in the page, the CSS definition of each node, and the dependencies of each node to calculate each

Node position in the screen

5.Painting: Basic rules for drawing content on the screen using a graphics card

6.Reflow: The browser finds a change in a section that affects the layout and needs to go back and re-render. Reflow will start from the root frame of the HTML

Calculate the size and position of each point recursively (Reflow is almost unavoidable). Folding and expanding of tree directories on an interface (display and hiding of elements)

(Tibet), etc., will cause Reflow. Scrolling, clicking, etc., causes changes in certain elements on the page, causing the entire page to be re-rendered. The browser will

Reflow code, which is impossible to estimate, are generally mutually influenced

7.Repaint: Changing an element’s background color, border color, etc., does not affect its surrounding or interior layout. Parts of the screen are repainted, but elements

The collection size has not changed.

8. Sometimes a change to an element does not immediately Reflow or Repaint but instead accumulates the change to a certain amount

Geoko rendering flowchart

Webkit rendering flowchart

Geoko and its rendering details you can refer to the difference between a www.cnblogs.com/slly/p/6640… This blog post