Front-end performance Optimization (iii)

CSS for blocking rendering

By default, CSS is considered a resource for blocking rendering, which means that the browser pauses rendering any processed content until the CSSOM build is complete. Make sure to reduce your CSS, transfer it as soon as possible, and use media types and media queries to unblock it.

In the previous section, we saw that the critical rendering path required that we both have DOM and CSSOM to construct the render tree, which has an important performance impact: Both HTML and CSS are resources that block rendering. HTML has nothing to say, because without DOM we don't have any content to render, but the need for CSS may not be as obvious. What happens if we try to render a normal page without blocking the CSS?

There is CSS in the New York Times without CSS for the New York Times (FOUC)

The example above shows that the New York Times has CSS and no CSS, which confirms why it is necessary to block rendering before CSS is available-pages with no CSS are basically unavailable. In fact, the situation on the right is often referred to as "content style transient failure" (FOUC). As a result, browsers block rendering before both DOM and CSSOM are owned.

CSS is a resource that blocks rendering, and it needs to be downloaded to the client as early and as quickly as possible to shorten the first rendering time.

But what if we have some CSS styles that are only used under certain conditions, such as page printing or page projection on a large screen? If these resources don't block rendering, that's great!

css"media types and media queries allow us to address such situations:

<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 a media type and 0 or more expressions that check for specific media characteristics. For example, our first style sheet declaration does not provide any media type or media query, so all cases will be applied-in other words, rendering is always blocked. On the other hand, the second style sheet will only work for content printing-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. The last style sheet declaration provides a media query, which is determined by the browser: if the condition matches, the browser blocks rendering until the stylesheet is downloaded and processed.

By using media queries, our skins can be tailored to different usage scenarios, such as display or print, or tailored to different situations such as screen orientation changes and resizing events. When declaring style sheet resources, be sure to pay more attention to media types and media queries because they have a significant performance impact on critical render paths!

Let's look at some simple examples below:

<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 and matches all cases.
• The second declaration blocks rendering: "All" is the default type, and if you do not specify any type, the default is "all". Thus, the first and second declarations are actually the same.
• The third article declares that there is a dynamic media query, which is judged when the page loads. Depending on the orientation of the device when the page loads, the portrait.css may or may not block rendering.
• The last statement only applies to printing, so the page does not block rendering when it is first loaded in the browser.

Finally, notice that "blocking rendering" only refers to whether the resource pauses the browser's first page rendering. CSS resources are downloaded regardless of whether or not CSS blocks rendering, except that non-blocking resources have a lower priority.

Front-end performance Optimization (iii)