YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Avoid CSS @import

前端性能优化:Avoid CSS @import

前面我们把 YSlow 中的前端性能优化规则都介绍了一遍,今天我们要介绍的是 Google 开发的 PageSpeed 前端性能分析工具的前端性能优化规则。今天介绍 PageSpeed 的前端性能优化规则是:Avoid CSS @import(避免在 CSS 中使用 @import)。

@import 简介

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

在一个外部 CSS 文件中,使用 CSS @import 可以延迟加载一个外部CSS文件。

这个不是很酷吗?延迟加载哦!但是实际的效果并不是我们想想中的那样,使用 CSS @import 会带来前端性能损失。

@import 带来的性能损失

首先要说明一点,@import 会带来的性能损失是在以为外部CSS文件中使用 @import 加载另外一个外部的 CSS 文件。例如 PageSpeed 文档中举出的例子,有一个first.css 文件,我们在它里面使用 @import 调用另外一个 second.css 文件,代码是这样的:

// 在 first.css 中使用 @import
@import second.css
/* 其他的 CSS代码 */

使用 @import 方式加载 second.css 这里的延迟加载是指浏览器必须先下载完毕 first.css 文件,然后解析CSS代码,然后执行first.css文件之后,才会知道是否要下载 second.css 文件。

不知道大家发现问题没有?使用 @import 加载两个外部 CSS 文件的顺序是加载完一个才会下载第二个,而我们前面在介绍 Make fewer HTTP requests 规则时介绍过,(大多数)浏览器是可以同时并行下载2个文件的,使用 @import 的性能问题就在于本来是可以同时并行下载的两个CSS文件,在使用 @import 之后,阻断了并行下载,@import 是先加载完一个再加载另外一个,这样会影响浏览器加载组件的速度,之后就会导致解析CSS花费更多的时间,从而影响前端性能。

而如果你页面中只加载一个 first.css 文件,你使用 @import 处理?

<style type="text/css">>
@import first.css
</style>

这个中情况不存在并行下载的问题,所以也就不会有什么性能损失。但是这样做是比较业余的表现,十分的滑稽。

使用 @import 方式加载 CSS 最愚蠢的做法 就是在 @import 的CSS文件中再使用 @import 调用另外一个CSS文件。例如在上面提到的 second.css 文件中再使用 @import third.css。千万别这么做!

Avoid CSS @import

既然要 Avoid CSS @import,我们就应该换一种方式调用外部 CSS 文件。请使用 <link/> 标签调用外部文件,例如这样:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/base.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/grid.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />

因为使用 <link/> 加载外部文件,浏览器可以同时并行下载2个CSS文件,浏览器下载和解析CSS的速度会更快,前端性能更高。当然,如果是在发布产品的时候,这样调用多个CSS文件,也是有性能损失的,因为HTTP请求数量过多,这样调用多个CSS文件的时候,我们会 Try combining them into one.,将多个CSS文件按照加载先后顺序打包成一个CSS文件,做到 Make fewer HTTP requests。

最后这里再啰嗦一句,前端性能优化的规则要活学活用,并且要结合到一起使用,达到最佳的前端性能优化效果。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Avoid CSS @import

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)