本文翻译自 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）