{{高性能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

发布了0 篇原创文章 · 获赞 2 · 访问量 4万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章