web前端优化时为什么不建议使用css @import

在Web前端优化的旅程中，我们经常会遇到关于CSS加载方式的建议。其中，有一条建议特别引人注目：避免使用CSS的@import。关于这一点，许多开发者一直心存疑惑，为什么使用@import会有如此不良的影响？其背后的原理是什么？

今天，我终于在Google开发者社区的一篇文章中找到了答案。

我们要明白，使用CSS的@import确实有其独特的价值，它允许我们在一个样式表中引入其他的样式表。当我们从外部样式表使用@import时，浏览器无法并行下载这些样式表。这意味着，浏览器必须先下载、和执行包含@import规则的样式表后，才能知道还需要下载其他的样式表。这种串行下载的方式会增加页面加载的总体往返时间。

例如，如果first.css文件中包含这样的代码：@import url("second.css")。浏览器必须先下载、first.css后，才能发现还需要下载second.css。这就导致了加载时间的增加。

相反，如果我们使用标签来引入样式表，浏览器就可以并行下载所有的样式表。这种方式可以显著提高页面的加载速度。例如：

重要的是要理解，避免使用CSS的@import并不是因为它相当于把CSS放在了页面底部，而是因为它会导致CSS无法并行下载，从而增加了页面加载的时间。页面渲染的过程需要等到所有的CSS都被下载和完成后才能开始。使用@import引入的CSS延迟会增加页面的空白期。

为了优化页面的加载速度和用户体验，我们应该尽量避免使用CSS的@import，而是采用标签的方式来引入样式表。这样可以让浏览器并行下载样式表，从而缩短页面的加载时间，提高页面的渲染效率。