Frontend performance optimization (1), performance optimization (

Frontend performance optimization (1), performance optimization (
Build an object model

To render content on the screen, the browser must first construct the DOM and CSSOM trees. Therefore, make sure that HTML and CSS are provided to the browser as quickly as possible.

 

Let's start with the simplest possible situation: a common HTML webpage contains some text and an image. What does the browser need to do to process this simple page?

The final output of the above process is the Document Object Model, that is, the "DOM" of this simple web page. The browser uses it to complete all subsequent processing of the page.

Each time the browser processes HTML tags, it must complete the preceding steps: Convert bytes to characters, confirm the symbols, convert the symbols to nodes, and then build a DOM tree. The whole process takes some time, especially when processing a large amount of HTML.

 

Note

• We assume that you have a basic understanding of Chrome DevTools-that is, you know how to capture a web waterfall chart or record a timeline. If you need to review it quickly, visit the Chrome developer documentation or use DevTools for the first time. We recommend that you take the Codeschool DevTools course.

If you open Chrome DevTools and record the timeline when loading the page, you can see the actual time required to perform this step-in the above example, it takes about 5 ms to convert a bunch of HTML bytes into a DOM tree. Of course, if the page is larger (most pages are like this), the process will take more time. In the subsequent sections on creating smooth animations, you will see that if the browser must process a large number of HTML files, this may become your bottleneck.

After the DOM tree is ready, do we have enough information to render the page on the screen? Not yet! The DOM tree captures the attributes and relationships of document tags, but does not tell us what the elements look like during rendering. This is CSSOM's responsibility, which we will discuss next.

 

CSS Object Model (CSSOM)

When the browser builds the DOM of our simple page, it runs on a link label in the head part of the document, referencing the external CSS style sheet style.css. The browser predicts that it will need this resource to render the page, so it will immediately send a request for this resource, the request returns the following content:

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

Of course, we can directly declare the style (Inline) in the HTML Tag. However, to separate CSS from HTML, we can separate the focus: the designer processes CSS and the developer pays attention to HTML, and so on.

Like HTML, we need to convert the received CSS rules into something that the browser can understand and handle. Therefore, we repeat a process that is very similar to processing HTML:

CSS bytes are converted to characters, converted to symbols and nodes, and finally linked to the tree structure, that is, the so-called "CSS object model", abbreviated as CSSOM:

Why does CSSOM adopt a tree structure? When the final style set is calculated for all objects on the page, the browser starts from the most common rule applied to the node (for example, if the node is a child element of the body element, apply all body styles), and then apply more specific rules to recursively refine the calculation style-that is, the rule is "stacked down 」.

Let's take a look at the CSSOM tree above. Body elementSpanAny text contained in the tag is a 16-pixel font size, and the red text-font-size command is stacked down from the body to the span. However, if the span tag is a sub-tag of the paragraph (p) Tag, its content is not displayed.

In addition, please note that the above tree is not a complete CSSOM tree, it only shows the style we decided to overwrite in the style sheet. Each browser provides a set of default styles, also known as "User proxy style"-that is, the style we see when we do not provide any custom style-our style only overwrites these default style sets (such as the default IE style ). If you have checked "computed styles" in Chrome DevTools and want to know where all styles come from, you should know the answer now!

Curious about the time required for CSS processing? Recording the timeline in DevTools and searching for the "Recalculate Style" Event: Unlike DOM parsing, timeline does not display a separate "Parse CSS" entry, instead, the "Recalculate Style" event captures the parsing, CSSOM tree construction, and recursive calculation of the calculated Style.

It takes about 0.6 milliseconds to process our small style sheets, affecting the eight elements on the webpage-time is not much, but it will also produce costs. But where do the eight elements come from? CSSOM and DOM are independent data structures. The result shows that the browser hides an important step. Next, let's talk about the rendering tree linking DOM with CSSOM.