Key render path

The key render path is a series of steps that the browser goes through. To convert HTML,CSS, and JavaScript into pixel content on the screen, First get the HTML and start building the DOCUMENT Object model (DOM), then get the CSS and build the CSS object model (CSSOM), then combine the two to form the Render Tree, and then the browser knows the content and position of each element according to the Render Tree. Finally, the rendering engine paints the elements on the screen (Paint).

Building an object model (HTML to DOM)

The DOM and CSSOM are built before the browser renders the page, so the HTML and CSS should be provided to the browser as soon as possible. When we enter the URL in the browser, the browser will request resources to the server to get HTML and other resources, and then get the HTML document header defines the browser in accordance with what specifications to deal with THE HTML document.

<! Java Thymeleaf template engine
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<! --> < span style = "max-width: 100%;
<html xmlns="http://www.w3.org/1999/xhtml"></html>
Copy the code

Each time a tag is parsed, the browser generates a Token, starting with the HTML Token StartTag:HTML and then StartTag:head. The whole process is done by the Token generator. When the Token generator performs this process, Another process is consuming these tokens and converting them into node objects. We create an HTML node and then consume the next Token to create a head node. Because of the end Token of head, in EndTag: HTML, The document Object Model (DOM) is generated when all the tokens are consumed. The DOM tree represents the content and attributes of the HTML, as well as the relationships between nodes.


      
<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. 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 strings into various tokens specified by the W3C HTML5 standard, for example,<html>,<body>And other strings in Angle brackets. Each token has a special meaning and a set of rules.
  3. Lexical analysis: The issued token is transformed into an “object” that defines its properties and rules.
  4. DOM construction: Finally, because 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.

Generate CSSOM

Browsers also parse CSS according to the CSS specification. Unlike DOM, CSS is layered downwards, so it is also called a cascading style sheet or cascading style rule. Child nodes may inherit some of the attributes of their parent nodes, such as the 16px font size defined in the body. Other child attributes inherit this size. And the browser’s CSS parsing process is blocked, so the browser has to parse all the CSS before using CSS styles (just like the browser’s backflow redraw).

CSS it only shows the styles that we decide to replace in the style sheet. Each browser provides a set of default styles (also known as User Agent styles) that we see when we don’t provide any custom styles, and our styles simply replace those defaults (for example, the default IE styles).

The formation of RenderTree

Start at the root of the DOM tree, match the CSS style, and then copy the CSS style to the corresponding DM node. As an attribute of a DOM node, if the node is a DOM root node, the RenderTree root node will be formed. If a node with display: None is encountered during rendering, it and its children will not be processed first. RenderTree does not load display: None into RenderTree

Layout (Layout)

If not, the default width such as Width :100% will be 980px.

Analyze the layout events through the browser console. The following figure shows the loading process of a web page. It can find out the time-consuming process of events, optimize the layout and code for paging reasons, and try to achieve batch layout to avoid multiple layout events.

Paint pages

As shown in the figure below, the main time of the webpage Paint is the process of Composite Layers (learn more).

The last

First we receive the HTML(local or browser) and start parsing it, and the DOM builds up, not all at once. If a link between CSS and JS is found in the head, a request will be sent. In order to form RenderTree, CSS will be parsed first to form CSSOM. The process of parsing CSS files will shield the JS engine, which is equivalent to locking the DOM to prevent CSS and JS from being modified at the same time. Completing CSSOM will unmask the JS engine, receive the JS, and execute the JS. Once the JavaScript parsing is complete, we can continue to build the DOM. Once we get the DOM and CSSOM, we’ll merge the two and build the RenderTree, then run the layout to draw the web page.

  • Browser optimization should pay attention to, first balance and then optimize the development, so you need to use Google Devtools specific analysis.
  • By default, CSS is treated as a resource that blocks rendering, which means that the browser will not render any processed content until CSSOM is built. Be sure to simplify your CSS, provide it as soon as possible, and take advantage of media types and queries to unblock rendering. In the render tree build, we saw that the key render path required us to have both DOM and CSSOM to build the render tree. This can have a serious impact on performance: HTML and CSS are resources that block rendering

Most of the images and text in this tutorial are from Google. Conditional can overcome GFW to have a look.