概览

在外部样式表使用CSS @import会在网页加载中增加延迟。

详细

CSS @import允许把样式表导入到其他样式表里，当CSS @import 在外部样式表中使用，浏览器是不能并行下载这些样式表的，这将增加网络请求的来回时间。例如，如果first.css包含如下内容：

@import url("second.css")

浏览器必须先下载、分析和执行first.css，再去下载second.css。

建议

使用 <link> 标记代替 CSS @import

对每个样式表使用 <link> 标记代替 CSS @import，以便浏览器能并行下载样式表，这将加速网页的加载时间：

<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />