{{高性能Web开发}}避免应用@import

{{高性能Web开发}}避免使用@import

Overview

使用CSS @import导入外部样式表会给页面加载增加额外的延迟。

Details

CSS @import允许在样式表中导入其它样式表。当CSS @import被用于外部样式表，浏览器不能并行下载样式表，这会给整个页面加载增加多余的RTT(round-trip times)。比如若first.css中包含如下内容：

@import url("second.css")

浏览器先下载，解析和执行first.css，然后再下载second.css。

Recommendations

使用<link>标签替换CSS @import

使用<link>标签替换@import可以使用浏览器并行加载样式表，从而缩短页面加载时间：

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

原文链接：https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport