共计 1299 个字符，预计需要花费 4 分钟才能阅读完成。
本文翻译自 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）