How CSS affects the white screen time during initial loading

Rendering pipeline with external css files

In the above figure, there is an idle time between requesting HTML data and building DOM, which may become a bottleneck for page rendering. After the DOM is built, the rendering pipeline is waiting until the CSS file is downloaded, because the next step is to synthesize the layout tree. The composite layout tree requires CSSOM and DOM, so you need to wait for the CSS to be loaded and parsed into CSSOM. In this case, the CSS does not block the generation of the DOM.

The role of CSSOM

• Provides JS with the ability to manipulate style sheets
• Provides basic style information for layout tree synthesis

Rendering pipeline for pages with inline JS and external CSS

As can be seen from the above figure, when encountering JS during DOM construction, construction will be stopped and JS will be parsed and executed, because JS may modify the current DOM.

Before executing the JS script, if the page contains external CSS or inline CSS, the rendering engine needs to convert them to CSSOM in advance. Because JS has the ability to modify CSSOM, it also depends on CSSOM before JS is executed. This means that CSS will also block DOM generation in some cases.

Rendering pipeline for pages with external JS and CSS

During the pre-parsing process of the requested HTML data, it is detected that there are external JS and CSS files that need to be downloaded, and download requests for the two files are initiated at the same time. The download times are not overlapping, but are calculated based on the longest one.

Regardless of which one arrives first, CSS or JS, you must first wait until the CSS file is downloaded and CSSOM is generated, then execute the JS script, and finally build the DOM, layout tree, and draw the page.

Factors affecting page display and optimization strategies

There are three stages from entering the URL to the first display of the page:

1. After the request is sent, when it comes to the data submission stage, the page still displays the content of the previous page.
2. After submitting the data, the rendering process will create a blank page. This period is called parsing white screen . It waits for the loading of CSS and JS files to be completed, generates CSSOM and DOM, and then synthesizes the layout tree, XXX and other steps to prepare for the first rendering.
3. After the first rendering is completed, the complete page generation phase begins, and the page will be drawn bit by bit.

The second stage has the greatest impact on user experience, including parsing HTML, downloading CSS, downloading JavaScript, generating layout trees, drawing pages, and other operations.

Optimization strategy

1. Inline CSS and JS, and start rendering directly after the HTML is downloaded.
2. To minimize file size, webpack removes comments and compresses files.
3. Mark some JS that does not need to be used in the HTML parsing stage with async or defer.
4. For large CSS files, you can use media queries to split them into CSS files for different purposes and load them only in specific scenarios.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.