为什么不建议使用css @import

- 日理万妓 2022-09-19 12:13 200阅读 0赞

曾经研究web前端优化时在网上多处看到这样一条建议，大意是：

不要使用 css @import, 因为用这种方式加载css相当于把css放在了html底部。

关于这一点，我一直很疑惑： 为什么用@import就等于把css放在了页面底部？ 原理是什么？？ 但一直不得而知，因为网络文章一大抄，转载的很多，去细究原因的却很少。

直到今天，在google developers看一篇文章时，无意间找到了这个原因，原文如下：

## Avoid CSS @import ##

### Overview ###

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

### Details ###

CSS [ @import][_import]allows 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, if`first.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 download`second.css`.

### Recommendations ###

Use the <link> tag instead of CSS @import

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

我们确实要避免使用css @import， 但原因却不是什么相当于放在了页面底部，而是这样做会导致css无法并行下载，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。 星球浏览器在页面所有css下载并解析完成后才会开始渲染页面（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.），因此css @import引起的css解析延迟会加长页面留白期。 所以，要尽量避免使用css @import而尽量采用link标签的方式引入。

上面两段引文分别出自：

[https://developers.google.com/speed/docs/best-practices/rtt\#AvoidCssImport][https_developers.google.com_speed_docs_best-practices_rtt_AvoidCssImport]

[https://developers.google.com/speed/docs/best-practices/payload\#RemoveUnusedCSS][https_developers.google.com_speed_docs_best-practices_payload_RemoveUnusedCSS]

[_import]: http://www.w3.org/TR/CSS2/cascade.html#at-import
[https_developers.google.com_speed_docs_best-practices_rtt_AvoidCssImport]: https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport
[https_developers.google.com_speed_docs_best-practices_payload_RemoveUnusedCSS]: https://developers.google.com/speed/docs/best-practices/payload#RemoveUnusedCSS