Browser Thematic series – Principles of rendering

The sample code

<! DOCTYPEhtml>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>
Copy the code

1. Build an object model

The DOM and CSSOM trees need to be built before the browser renders the page

Document Object Model (DOM)

The build process

  1. Conversion: The browser reads the raw bytes of HTML from disk or the network and converts them to individual characters based on the specified encoding of the file (such as UTF-8)
  2. Tokenization: The browser converts a string toThe W3C HTML 5 standardThe various tokens specified, for example,<html>,<body>, and other strings in Angle brackets. Each token has a special meaning and a set of rules
  3. Lexical analysis: Converting tokens into “objects” that define attributes and rules
  4. DOM construction: Since HTML tags define relationships between different tags (some tags are contained within other tags), the objects created are linked within a tree data structure that also captures parent-child relationships defined in the original tags: The HTML object is a parent of the body object, the body is a parent of the Paragraph object, and so on

The final output of the process is the Document Object Model (DOM), which the browser uses for further processing of the page

Every time the browser processes an HTML tag, it does all of the above: converts bytes to characters, identifies tokens, converts tokens to nodes, and then builds a DOM tree.

CSS Object Model (CSSOM)

When the browser builds the DOM for our simple page, we encounter a link tag in the head section of the document that references an external CSS style sheet: style.css.

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
Copy the code

This is similar to the process when working with HTML

CSS bytes are converted into characters, which are then converted into tokens and nodes, and finally linked into a “CSS object model” (CSSOM) tree structure

summary

  • The DOM and CSSOM trees need to be built before the browser renders the page
  • Construction process: Bytes → Characters → Tokens → Nodes → Dom
  • DOM and CSSOM are independent data structures

2. Render tree construction

Introduction to the

The render tree is used to calculate the geometry of each visible element and then draw the actual pixels on the screen based on the geometry of those elements

The build process

The browser combines the DOM and CSSOM numbers into a “render tree” that contains all the visible content on the page, as well as all CSSOM style information for each node

  • Each visible node is traversed starting at the root of the DOM tree
    • Some nodes are not visible (e.g. script tags,meta tags, etc. –title,meta,link)
    • Some nodes are hidden by CSS and therefore ignored in the rendering tree (display: None)
  • For each visible node, find suitable CSSOM rules for it and apply them

summary

  1. DOM and CSSOM trees are combined to generate a render tree
  2. The render tree contains only the nodes needed to render a web page (visible nodes)

3. Reflow and redraw

backflow

There are also “layout”, “rearrangement” and so on

Based on the generated render tree, traverse from the root node of the render tree to calculate the geometry information for each node (exact location and size within the device viewport)

The output is a “box model” that accurately captures the exact position and size of each element within the viewport: all relative measurements are converted to absolute pixels on the screen

redraw

Also called “draw” or “rasterize”

After the generated render tree and the backflow stage, the detailed geometric information and styles of all visible nodes are obtained, and then each node of the render tree is transformed into an actual pixel on the screen

conclusion

1. Parse HTML- build DOM

The browser parses the received HTML and builds a DOM tree

  1. All the stuff that’s going around the network is zeros and ones. When the browser receives the byte data, it converts it to a string
  2. These strings are converted into tokens through lexical analysis, a process called tokenization in lexical analysis
  3. Tags are converted to nodes and built into a DOM tree based on previous relationships between different nodes
  4. When parsing HTML files, when encountering CSS and JS files, the browser will also download and parse these files, which will block parsing/rendering

2. Parse CSS- Build CSSOM

The stylesheet is parsed to build the CSSOM tree

During this process, the browser determines the style of each node (which is a very resource-intensive process, since styles can be assigned to a node or inherited), recurses through the CSSOM tree, and determines what style the specific element is

Therefore:

  • Avoid writing overly specific CSS selectors whenever possible
  • For HTML, add as few meaningless tags as possible to keep the hierarchy flat

3. Merge DOM/CSSOM- generate render tree

Once the DOM and CSSOM trees are generated, the two trees are combined into a render tree

The render tree will only contain the nodes that need to be displayed and the style information for those nodes

Nodes that are not displayed

  • css:display:nonoe
  • Tags :script,link,meta, etc

4. Return

Based on the generated render tree, traverse from the root node of the render tree to calculate the geometry information for each node (exact location and size within the device viewport)

5. Redrawn

After the generated render tree and the backflow stage, the detailed geometric information and styles of all visible nodes are obtained, and then each node of the render tree is transformed into an actual pixel on the screen

reference

  • Browser | front end into the order
  • developers.google

The original text is first published in personal blog, the special series will sort out many articles, and we learn together, common progress, if there is a mistake, please correct

Browser series

  • 1. Browser Thematic series – Caching Mechanisms
  • 2. Browser Thematic series – Principles of rendering
  • 3. Browser Thematic series – Block rendering
  • 4. Browser Thematic Series – Local Storage
  • 5. Browser Special Series – Web Security
  • 6. Browser Series – Browser kernel
  • 7. Browser Thematic series – Cross domain and cross site
  • 8. Browser Thematic Series – Event loops