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

Today, I will talk to you about why css @ import is not recommended for web front-end optimization. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something from this article.

When I studied web front-end optimization, I saw this suggestion in many places on the Internet, to the effect that:

Do not use css @ import, because loading css in this way is equivalent to putting css at the bottom of html.

I've always wondered about this: why using @ import is tantamount to putting css at the bottom of the page? What is the principle? But it has not been known, because a large copy of the network article, reprinted a lot, to study the reasons are very few.

Until today, I stumbled upon this reason when I was reading an article on google developers. The original text is as follows:

Avoid CSS @ import

Overview

Using CSS @ import in an external stylesheet can add additional delays during the loading of a web page.

Details

CSS @ importallows stylesheets to import other stylesheets. When CSS @ import isused from an external stylesheet, the browser is unable to downloadthe stylesheets in parallel, which adds additional round-trip timesto the overall page load. For instance, iffirst.css contains the following content:

@ import url ("second.css")

The browser must download, parse, andexecute first.css before it is able to discover that itneeds to downloadsecond.css.

Recommendations

Use the tag instead of CSS @ import

Instead of @ import, use a tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

We do want to avoid using css @ import, but the reason is not that it is put at the bottom of the page, but that doing so will cause css not to be able to download in parallel, because the file referenced by @ import will not know that there is another css to download until the css file referencing it is downloaded and parsed, and then download it, and then start parsing, building render tree and other operations. Planet browser will not render the page until all the css has been downloaded and parsed (Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.), so the css parsing delay caused by css @ import lengthens the page blank period. Therefore, we should try to avoid the use of css @ import and try to introduce it by using link tags.

After reading the above, do you have any further understanding of why css @ import is not recommended for web front-end optimization? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.