避免使用CSS @import 影响页面加载速度

本文翻译自 What Is CSS @import And Why Can It Slow Down Websites?，略有删改

CSS@import可以用来加载其他CSS样式的便捷方式，但是使用它也会使网站的资源呈现变得更慢，导致网站呈现的时间更长。

什么是CSS @import？

加载CSS文件最常见的方法是使用link标签：

<link rel="stylesheet" type="text/css" href="link.css" />

另一种方法是在另一个样式表中引用一个样式表，使用CSS中的@import "url"：

@import "imported.css";
/*contents of link.css */

但是这样浏览器在加载初始CSS文件后会启动另一个样式表得请求。

为什么CSS @import会让你的网站变慢？

大多数CSS文件都会阻止资源，这意味着浏览器必须先下载它们，然后才能向用户显示页面内容。

当添加多个样式表而不使用@import时（通常在HTML中使用link标签），浏览器可以并行下载它们。

相比之下，使用@import在另一个CSS文件中引用一个CSS文件意味着它们是按顺序下载的，这需要更长的时，因此网站加载速度较慢。

例如，在CSS文件中导入Google Fonts时经常会发生这种情况。

这个请求瀑布图展示了@import创建了一个顺序依赖，从而减慢网站的速度。Google字体CSS要在style.css下载后才能开始加载。

如何避免使用@import

使用标准<link>标签代替@import。如果可以编辑源CSS文件，请删除@import，并使用<link>标签在HTML文档中引用CSS文件。

而不是在CSS文件中执行此操作：

在你的HTML中按如下使用：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Press+Start+2P"/>

如果你不能编辑CSS文件，你可以使用预加载资源提示来帮助浏览器更快地发现（和下载）@import资源。

<link rel="stylesheet" href="parentCSS.css"/>

<link rel="preload" href="//fonts.googleapis.com/css?family=Press+Start+2P" as="font"/>

如何检查您的网站是否使用@import

• 转到 debugbear.com/test
• 输入您网站的URL
• 向下滚动至建议
• 查看建议是否包括删除@import

结论：CSS导入与链接

尽可能使用link标签而不是CSS @import，以便您的网站尽可能快地呈现。

当无法使用link标签时，请考虑使用预加载加载包含@import的样式表。

最后

在现代脚手架搭建的项目中，在开发代码中使用的@import最终编译是会合并在一起的，不会存在这种问题，如果在编译过程中没有做特殊处理的情况则需要关注一下这块的影响。看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）