Simple rendering process

Url parsing:

  1. The user enters the URL address

  2. The browser parses the URL to resolve the host name

  3. The browser converts the host name to the server IP address. (The browser first looks up the local DNS cache list and then sends a query request to the browser’s default DNS server.)

  4. The browser interprets the port number from the URL

  5. The browser establishes a TCP connection to the target Web server (three-way handshake)

  6. The browser sends an HTTP request packet to the server

  7. The server returns an HTTP response packet to the browser

  8. Close the connection browser to parse the document

  9. If there are resources in the document, repeat actions 6, 7, 8 until all resources are loaded

HTML parsing:

  1. HTML is built into a DOM tree (DOM = Document Object Model). The DOM tree construction process is a deep traversal process: the next sibling node of the current node will be built only after all the child nodes of the current node have been built.
  2. Parse CSS to CSS to construct a CSS Rule Tree
  3. Create Rendering Tree based on DOM Tree and CSSOM. Note: Rendering Tree is not the same as DOM Tree, because something like Header or display: None doesn’t need to be in the Rendering Tree.
  4. With Render Tree, browsers already know what nodes are in a web page, their CSS definitions, and their dependencies.
  5. The next step is called Layout, which is a Layout render tree that calculates the position of each node on the screen.
  6. The next step is to Paint, which is to traverse the Render tree and draw each node using the browser UI back-end layer.

Render Tree

Render tree represents a visual display of a document, through which the browser draws the document content in the browser window and shows it to the user. It consists of a series of rectangular objects displayed on the screen in sequence, with visual style attributes such as font, color and size, position, etc. For these moment objects, FireFox calls them frames,Webkit browsers call them render objects (renderer), and later collectively called render objects.

Each render object represents a CSS box of its corresponding DOM node, which contains geometric information such as size and position, while pointing to a style object containing other visual style information.

Each render object corresponds to a DOM node, but non-visual (hidden, non-placeholder) DOM elements are not inserted into the render tree, such as the element or the declaration display: None; Element, apply colours to a drawing object and the DOM node is not a simple one-to-one relationship, a DOM can correspond to a rendering object, but a DOM element may correspond to multiple rendering object, because there are many elements contains more than one CSS boxes, such as when a text is fold line, can produce multiple line boxes, the guild generate multiple rendering object; Or if the inline element contains both block and inline elements, an anonymous block-level box containing the inner inline element is created, where a DOM corresponds to multiple rectangular objects (render objects).

Layout

After creating the render tree, the next step is a Layout, or reflow (relayout). This process takes information from the render objects in the tree, calculates the position and size of each render object, and places it in the correct position in the browser window. Sometimes we modify the DOM after the layout of the document is complete. In this case, we may need to rearrange, also called backflow, which is essentially a layout process. Each rendered object has a layout or backflow method that implements its layout or backflow.

Paint

Finally, there’s the Paint phase or repaint phase, where the browser UI component walks through the render tree and calls the paint method of the render object to display the content on the screen, or it may modify the DOM later and need to redraw the render object, or redraw, For the relationship between draw and redraw, see layout and reflow.

Reflow (Reflow/rearrangement)

When it finds that something has changed that affects the layout, the render tree needs to be recalculated.

The reason:

  1. DOM operations such as add, delete, modify, or move;
  2. Change content;
  3. Activate pseudo class;
  4. Accessing or changing certain CSS properties (including changing style sheets or element class names or using JavaScript operations);
  5. Browser window changes (scrolling or sizing changes)

How to reduce reflow

  1. Limit the reach of Reflow as much as possible. You need to change the style of the element and not affect the child element through the parent element. It’s best to add directly to the child element.
  2. Changing the node style by setting the style property will result in a reflow for each setting. So it’s best to set class.
  3. Reduce unnecessary DOM depth. Changing one level in the DOM tree causes changes at all levels, up to the root and down to the children of the changed node. This results in a lot of time spent executing reflow.
  4. Avoid unnecessarily complex CSS selectors, especially descendant selectors, which consume more CPU to match.

Repaint (redraw)

Properties that change an element’s background color, text color, etc., and do not affect the surrounding or internal layout of the element will only cause the browser to repaint the element based on its new properties, giving the element a new look. Redrawing does not entail rearrangement and does not necessarily accompany rearrangement; Reflow takes more time than Repaint, which affects performance more. So when writing code, try to avoid too many reflows.

Script parsing

The browser parses, loads, and executes the script synchronously. When the browser parses the document, it parses the script when it hits the