Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to optimize the performance of CSS". In the daily operation, I believe that many people have doubts about how to optimize the performance of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to optimize the performance of CSS". Next, please follow the editor to study!

Css rendering Rul

To optimize the performance of CSS, we first need to understand the rendering rules of CSS. The CSS selector matches from right to left.

Let's look at an example:

.nav h4 a {font-size: 14px;} copy the code

The rendering process is something like this: first find all the a, look for h4 along the parent element of a, and then follow h4 to find .nav. If you find a node that meets the matching rules, join the result set. If none of the root element html matches is found, the path is no longer traversed, and the search match is repeated starting with the next a (as long as there are multiple rightmost nodes an on the page).

Tips: why do CSS selectors match from right to left?

More selectors in CSS do not match, so when considering performance issues, you need to consider how to improve efficiency when selectors do not match. Matching from right to left is to achieve this goal, and this strategy can make CSS selectors more efficient when they do not match. Come to think of it, it makes sense to spend more performance on matching.

Inline first screen key CSS (Critical CSS)

There is an important indicator in performance optimization-the first effective drawing (First Meaningful Paint, referred to as FMP) refers to the time when the primary content of the page (primary content) appears on the screen. This indicator affects the amount of time users need to wait to see the page, which can be reduced by inlining the first screen key CSS (Critical CSS, which can be called the first screen key CSS).

Many people like to reference external CSS files through link tags. What you need to know, however, is that inlining CSS directly into an HTML document makes CSS download faster. When using external CSS files, you don't know the CSS files you want to reference until the HTML documents have been downloaded before downloading them. So, inline CSS allows browsers to start page rendering earlier, because it can be rendered after the HTML download is complete.

However, we should not inline all CSS in HTML documents, because there are limitations in [initial congestion window] (TCP-related concepts, usually 14.6kB, compressed size). If the file after inline CSS exceeds this limit, the system needs to make more round trips between the server and the browser, which does not advance the page rendering time. Therefore, we should inline only the key CSS needed to render the first screen content into the HTML.

Another thing to note about ⚠️ is that inline CSS is not cached and will be downloaded again each time with the loading of HTML. However, we keep the key CSS of inline first screen within 14.6kB, which has a positive effect on performance optimization. (everything has its advantages and disadvantages)

Asynchronously load non-first screen CSS

We need to know two things: (see my previous article: these browser interview questions, see how many you can answer? )

CSS does not block parsing of DOM, but does block rendering of DOM

CSS blocks JS execution, but does not block the download of JS files

Since CSS will block the rendering of DOM, after we inline the key CSS of the first screen, the remaining non-first screen CSS content can be loaded asynchronously using external CSS to prevent the non-first screen CSS content from blocking the rendering of the page.

CSS asynchronous loading mode

The first method is to create dynamically

/ / create link tags const myCSS = document.createElement ("link"); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; / / insert into the last position of header document.head.insertBefore (myCSS, document.head.childNodes [document.head.childNodes.length-1] .nextSibling)

The second method is to set the media attribute of the link element to a media type (or media query) that the user's browser does not match.

For browsers, if the stylesheet does not apply to the current media type, its priority is lowered and downloaded without blocking page rendering. After the first screen file is loaded, set the value of media to screen or all, which allows the browser to start parsing CSS.

The fourth method is to use rel=preload to load CSS asynchronously

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.