CSS blocking rendering, how to prevent CSS blocking

Browser Rendering Process:

1. The browser starts parsing the target HTML file, and executes the stream in the top-down order.

2. The HTML parser transforms the HTML structure into the underlying DOM (document Object model), which triggers the domcontendloaded event when the DOM tree is built.

3, CSS parser parses CSS into Cssom (cascading style sheet object model), a tree containing only style information.

4, Cssom and Dom begin to merge to form the render tree, and each node begins to contain the specific style information.

5. Calculate the location information of each node in the render tree, that is, the layout stage.

6, the layout of the rendering tree display to the interface.

According to the above process, you can know that when the cssdom is not completed, the page will not render to the browser interface, which is why when the CSS download too slow, there will be a white screen phenomenon.

We can simulate the example of white screen, we can see that the HTML document and IMG have been downloaded, but the page is not rendered, but wait until the CSS loading is completed before rendering, which also confirms that the CSS loading process will block the page rendering. So in our front-end daily development, we should minimize the response time of CSS

By default, CSS is considered a resource for blocking rendering, which means that the browser will not render any processed content until the CSSOM is built. Be sure to refine 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 see that the critical render path requires that we have both DOM and CSSOM to build the render tree. This can have a serious impact on performance:both HTML and CSS are resources that block rendering.

HTML is obviously necessary, because without the DOM we have no content to render, but the need for CSS may not be obvious.

But what if we have some CSS styles to use only under certain conditions, such as displaying a Web page or projecting a Web page onto a large display? If these resources do not block rendering, how good is that.

We can solve this kind of use case through CSS "media type" and "Media query":

<link href="Style.css"Rel="stylesheet"> <link href="Print.css"Rel="stylesheet"Media="Print"> <link href="Other.css"Rel="stylesheet"Media="(min-width:40em)">

Media queries consist of media types and 0 or more expressions that check the state of a particular media feature.

For example, the first style sheet declaration above does not provide any media type or query, so it works in all cases, that is, it always blocks rendering. The second style sheet does not, however, apply only when the content is printed---perhaps you want to rearrange the layout, change the font, and so on, so when the page first loads, the stylesheet does not need to block rendering. Finally, the last stylesheet declares a "media query" that is executed by the browser: when the condition is met, the browser blocks rendering until the stylesheet is downloaded and processed.

By using media queries, we can tailor the appearance to specific use cases (such as display or print), or to dynamic situations such as screen orientation changes, resizing events, and so on. when declaring your stylesheet assets, pay close attention to media types and queries, as they will severely affect the performance of critical render paths.

Let's consider these examples:

<link href="Style.css"Rel="stylesheet"> <link href="Style.css"Rel="stylesheet"Media=" All"> <link href="Portrait.css"Rel="stylesheet"Media="orientation:portrait"> <link href="Print.css"Rel="stylesheet"Media="Print">

The first declaration blocks rendering, which applies to all situations.

The second declaration also blocks rendering: "All" is the default type, and if you do not specify any type, it is implicitly set to "all". Therefore, the first declaration and the second declaration are actually equivalent.

The third declaration has a dynamic media query, which is calculated when the page loads. Depending on the direction of the device when the page is loaded, PORTRAIT.CSS may block rendering, or it may not block rendering.

The last declaration is applied only when the page is printed, so it does not block rendering when the page is first loaded in the browser.

Finally, notice that "blocking rendering" only refers to whether the browser needs to pause the first rendering of a webpage until the resource is ready. In either case, the browser will still download the CSS asset, except that the resource with no blocking renders has a lower priority .

CSS blocking rendering, how to prevent CSS blocking