Simple process

  1. Parsing HTML text to build a DOM tree
  2. Parse CSS styles to build the CSSOM Tree
  3. Construct Render tree according to DOM tree and CSSOM Tree
  4. Render Tree Information for Layout processing
  5. Painting page elements

WebKit main flow

Mozilla Gecko rendering engine main flow

There is not much difference between the two main rendering engine processes, and here we show the WebKit process

parsing

Parsing can be divided into two sub-processes: lexical analysis + syntax analysis. This step parses the document into a Parse Tree

compile

Compile the contents of the parse tree into machine code

The tree building process

Take the following HTML as an example

<html>
	<body>
		hello world
	</body>
</html>
Copy the code

The build process can be understood in terms of the VUE lifecycle

  1. Initial mode: The before HTML cycle is entered after the HTML is received
  2. Before HTML: Create HTMLHtmlElement and add it to the root element
  3. Before Head: Create HTMLHeadElement and add it to tree
  4. in head
  5. After head: Create and add HTMLBodyElement
  6. In body: Hello World is received and added to the text node
  7. after body
  8. After After Body: indicates the end tag of HTML parsing
  9. The end of the parse

WebKit CSS parser

WebKit uses Flex and Bison parsers + generators to automatically create parsers from CSS syntax files. Every CSS file will be parsed into a StyleSheet object. Each object contains CSS rules. CSS rule objects contain selectors and declaration objects, as well as other objects that correspond to CSS syntax

Script script and style sheets processing sequence

script

When the parser arrives

Optimize page preparsing

To solve the problem that document parsing will stop when script script is loaded, the browser engine is optimized to support the pre-parsing technology separated from the main thread. In the process of script acquisition and execution, another thread will parse HTML and download resources to be loaded from the network in advance to achieve parallel loading and improve loading efficiency

Style sheets

Since CSS information may be required for script script execution, FireFox blocks script execution while Style Sheets are still loading and parsing, and WebKit blocks script execution when the script attempts to access an unloaded Style

Render tree

As you build the DOM tree, the browser also builds the render tree. The nodes of the tree are rendered in the order they are displayed, so that the pages are drawn in the correct order

The drawing class information for WebKit is as follows

class RenderObject{
  virtual void layout(a);
  virtual void paint(PaintInfo);
  virtual void rect repaintRect(a);
  Node* node;  //the DOM node
  RenderStyle* style;  // the computed style
  RenderLayer* containgLayer; //the containing z-index layer
}
Copy the code

Relationship between Render Tree and DOM Tree

The Render node is corresponding to the DOM element, but not one-to-one. DOM elements that do not need to be displayed will not be added to the Render Tree, such as head tags, display: None elements (overflow: hidden elements will be added to the Render Tree).

Style calculation

Generating a rendering tree requires calculating the visual properties of each rendering object, which requires calculating the style data of each node. It is not recommended to nest multiple layers of selectors, which will increase the matching cost of CSS selector and consume more browser performance

paint

In the Paint phase, you iterate through the render tree, calling the Paint method to display the content on the screen, and Paint uses UI components

Dynamic change

For the sake of user experience, the browser will change the page as little as possible when the HTML element changes. For example, changing the color of the element will only result in the rePaint of the element, changing the position of the element will result in the layout and rePaint of the sibling element whose child element has been affected, and increasing the font size of the HTML element. It redraws the whole tree