series

  • Reason # 1: Whether you’re a front-end developer or a back-end developer, there’s a question you’re often asked in an interview"What happens when you go from entering the URL in the browser to displaying the page?"averyThis series of common questions is sure to shock your interviewer, and they might just dismiss you for this one. Hey hey.
  • Reason two: I am mainly back-end direction, this series of articles is also for learning records, convenient to refer to later. Geek time teacher Li Bing also opened this column, after reading there are a few questions, their own information to learn to sort out again.

Koala is dedicated to sharing the complete Node.js technology stack, from JavaScript to Node.js, to back-end database. Wish you become an excellent senior Node.js engineer. [Programmer growth refers to north] Author, Github blog open source project github.com/koala-codin…

What is the DOM

DOM stands for Document Object Model

The W3C Document Object Model (DOM) is a platform – and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents. – This is the concept given by W3Cschool

DOM is a structured representation of an HTML document. The byte stream of HTML files returned by the backend server to the browser rendering engine cannot be directly understood by the browser rendering engine. Instead, it needs to be translated into an internal structure that the renderer engine can understand. The W3C concept, which I don’t think I’ve fully translated, “allows programs and scripts to dynamically access and update the content, structure, and style of documents.” That’s where DOM comes in

  1. Page presentation: THE DOM is the basic data structure for generating pages
  2. JavaScript script manipulation: THE DOM provides an interface for JavaScript script manipulation, through which JavaScript can access the DOM structure to change the structure and style of a document
  3. Security: DOM is a line of security, and the DOM parsing phase filters out unsafe DOM content.

In this article I’ll focus on the Webkit rendering engine, which is used in Both Safari and Chrome. Webkit is an open source rendering engine that was originally developed for Linux and later ported by Apple to Mac and Windows.

Render treeThe final formation of what has been experienced

Let’s take a look at the overall flow chart

HTML parser

The first step in returning the HTML file stream from the back end to the browser rendering engine is to pass through the HTML parser in the rendering engine. It implements the HTML byte stream into DOM tree structure. The HTML parser is parsing the HTML file as the byte stream returns, loading it and parsing it as it goes.

Example 1: The simplest HTML code without CSS and JavaScript shows the HTML parser

<html>
<body>
    <div>Programmers grow north</div>
</body>
</html>
Copy the code

Look at what the HTML parser does based on this code

Stage byte stream conversion to characters and W3C standard tokenization

Read the raw byte streams of HTML and convert them to individual characters according to the specified encoding of the file, such as UTF-8. And convert the string to various tokens specified by the W3C HTML5 standard, such as “”,” “, and other strings in Angle brackets. Each token has a special meaning and a set of rules.

A bunch of byte stream bytes

3C 62 6F ... 
Copy the code

To a normal HTML file

<html>
<body>
    <div>
    koala
        <p>Programmers grow north</P>
    </div>
</body>
</html>
Copy the code

Phase two converts byte flows into tokens through a tokenizer

The tokenizer converts the byte stream into tokens one by one, including Tag tokens and text tokens. The result of the tokenizer conversion is as follows:

Phases three and four resolve the Token into a DOM node and add the DOM node to the DOM tree

The HTML parser maintains a Token stack structure (data structures are a nice thing). The purpose of this stack structure is to calculate parent-child relationships between nodes. Tokens generated in the previous phase are pushed into this stack in sequence.

  • When the HTML parser starts working, it creates an empty DOM structure rooted in document by default and pushes a StartTag Document Token to the bottom of the stack.

  • If a StartTagToken is pushed onto the stack, the HTML parser creates a DOM node for the Token and adds the DOM node to the DOM treeThe parent nodeThe DOM node generated by the next element on the stack

  • If the tokenizer parses a text Token, a text node is generated and the text Dom node is added to the Dom tree (note: the text Token is not pushed)The parent nodeIs the DOM node corresponding to the current top of the stack Token.

  • If the parser returns an EndTag, such as the EndTag div example, the HTML parser checks to see if the element at the top of the Token stack is a StartTag div. If so, it pops the StartTag DIV from the stack, and the div element is parsed.

  • Finally, following the rules above, the word divider parses all the way down to form a simple DOM tree.

At this point, you should understand the HTML parser part of the core diagram, and the basic drawing process of the DOM tree, but the reality is very cruel, where there is such a simple front-end code, JavaScript and CSS! Keep reading

CSS parser

The ultimate goal of a CSS parser is to build a tree but the tree it builds is a CSSOM tree and the process for building a tree is basically the same as the process for building a DOM tree

body { font-size: 16px }
div { font-weight: bold }
div p { display: none }
Copy the code

Look at the CSSOM tree that we ended up with

Why does CSSOM have tree structure? For any object on the page when calculating the last set of style, the browser will start from the most general rules apply to the node (for example, if the node is the child body element, the application of all body style), and then by applying more specific rules (that is, the rule “to the lower league”) to the style of the optimization calculation recursive way.

The CSSOM tree above is taken as an example for more detailed elaboration. Any text contained within the SPAN tag that is placed within the body element will have a 16-pixel font size and color red — the font-size directive is appended from the body to the span. However, if a SPAN tag is a child of a paragraph (p) tag, its content will not be displayed.

Note:

  1. CSS parsing can be done in parallel with DOM parsing
  2. If you have only CSS and HTML on your page, CSS does not affect the creation of the DOM tree, but if you have JavaScript on your page, the conclusion is different. Keep reading.

The impact of javascript on DOM and CSSOM tree creation

There is no javascript in either of the above examples, so let’s talk about javascript’s impact on DOM tree and CSSOM tree construction.

  • Case 1: There is only Html and JavaScript in the current page, and JavaScript was not imported

    When a JavaScript script is encountered during DOM tree construction, DOM parsing should be suspended and JavaScript executed first, because JavaScript may manipulate the DOM nodes that have been generated currently.

    Note that it is possible for javascript to manipulate a DOM node that has already been generated, but this does not work if the DOM node has not yet been generated, as in this code:

     <html>
     <body>
         <div>1</div>
         <script>
             let div1 = document.getElementsByTagName('div') [0]
             div1.innerText = 'Programmer growth is north'

             let div2 = document.getElementsByTagName('div') [1]
             div2.innerText = 'kaola'
         </script>
         <div>test</div>
     </body>
 </html>
Copy the code

    The result is shown in two lines: the first line is the result of programmer growth indicating north and the second line is marked as test because the DOM node corresponding to the second div has not been generated in the DOM tree when the script script is executed on lines 3 and 4.

  • Case 2: When the page has both Html, JavaScript and CSS, and neither is imported

    When a JavaScript script is encountered during DOM tree construction, DOM parsing should be suspended and JavaScript should be executed first. At the same time, JavaScript should determine whether CSSOM has been parsed, because JavaScript may manipulate CSSOM nodes. The CSSOM node confirms that parsing is complete and executes JavaScript to create again back into the DOM tree. (So CSS parsing can also indirectly affect DOM tree creation.)

  • Case 3: When the page has Html, JavaScript, and CSS, and is imported externally

    One of the optimizations of the Webkit rendering engine is that when the rendering process receives the byte stream of HTML files, it starts a preparse thread. If it encounters a JavaScript file or CSS file, the preparse thread will download the data in advance. When the renderer receives a byte stream of HTML files, it starts a preparse thread, which downloads the data in advance if it encounters a JavaScript or CSS file. If a JavaScript file is encountered during the creation of the DOM tree, then it is of the same type as case 2.

Influence diagram: Draw an influence diagram for better memory:

Building a Render tree

With the DOM tree and the CSSOM tree, browsers can build render trees from both. The browser iterates through each visible node, starting at the root of the DOM tree, and then finds the appropriate CSS style rules for each visible node and applies them. The specific rules have the following points to note:

  • Render Tree and DOM Tree do not correspond exactly.

  • Note that visibility: hidden is different from display: None. The former hides the element, but the element still occupies layout space (rendering it as an empty box), while the latter (display: None) completely removes the element from the rendering tree, and the element is neither visible nor part of the layout

Taking a look at the DOM and CSSOM trees mentioned in the previous question, the resultant render tree looks like this:

What optimization can be done in the process of rendering tree formation in this paper

Having looked at the rendering tree formation, what optimizations can we make during development? (Note that this optimization is only for the rendering tree formation part, other optimizations will be covered later in this series.)

  1. CSS resources precede JavaScript resources in the order of introduction. The style file should be in the head tag and the script file should be at the end of the body to prevent blocking.
  2. Minimize DOM manipulation in JavaScript.
  3. Simplify and optimize CSS selectors to minimize nesting layers.
  4. When modifying an element’s style, changing its class attribute is the most high-performance method.

conclusion

After reading this article, take a look at your front-end code, think about the rendering tree formation process, and think about what needs to be improved in your code. The next article in this series will be about the layout and rendering of the rendering tree and the necessity of the virtual DOM tree. Thanks for watching.

References:

Geek Time Browser column

Browser rendering principle: srtian96. Gitee. IO/blog / 2018/0…

Pay attention to my

Feel good point Star, welcome to join the group to learn from each other.