飞龙博客

妙法莲华经

高性能CSS写法探讨

feilong.org 修订于2013-04-16 06:25:22

编写css有各种途径,有直接dreamweaver视图傻瓜化编写的,有纯手工编写css的,格式上有喜欢缩写紧凑成一行的,有喜欢把css最后一个分号拿掉的,也有喜欢css标准写法的。每个人都有一套自己的css写法和经验。这里飞龙探讨一下自己对高性能CSS写法。修订网址本日志更新网址:http://feilong.org/best-efficient-css 加入收藏夹,查看更方便。

一、CSS选择器对性能的影响

读取html只占了整个响应时间中的5%,其余的时间用来读取网页的css、图片、脚本、flash、视频等。这里主要关注css性能的优化。

CSS引擎由右至左评估每个规则,从 最右边的选择器开始(称为“键”【Key】),并通过移动每个选择器,直到找到一个匹配或丢弃的规则。(“选择器”是应用规则的文档元素。)

选择器匹配html元素时所消耗的时间越少,性能就越好。大家知道id选择器比类选择器好,类选择器比标签选择器性能要好。子选择器比后代选择器性能要好。

二、避免通配选择器

通配选择器使用 * 符合表示,可匹配文档中的每一个元素。如下:

* { font-size:20px;}

三、少使用针对属性的选择器

把某个外观属性当做选择器名称,然后给某个html元素附加此外观,比如左浮动、有浮动、边界、边距、颜色,有些人喜欢这样给某个html元素叠加外观。

下面飞龙举例:

.fl{float:left;}
.fr{float:right;}
.p10{padding:10px;}
.mr0{margin-right:0;}

然后html元素

这种做法不符合对象化写法还在其次,主要是一大堆class 以后修改css还得修改html,很费事。

四、少使用属性过滤选择器

比如下面:
a[href="#index"]{color:#ff0;}
input[type="button"]{border:1px solid #f00;}

针对html元素的某个属性来过滤,其匹配开销比较大。

五、避免类正则过滤选择器

CSS3添加了比如 *=, |=, ^=, $=, 和 ~=,类似于正则过滤,我们应尽量避免使用。

六、尽量不要有多余修饰的规则

例如:
ul#top_blue_nav {...}
form#UserLogin {...}

ID选择是唯一的定义。加上标签或类限制不必要。

七、对非链接应用:hover伪选择器

例如:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa:hover {...}

非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。

八、移除无匹配样式

有两个好处:1、缩减样式文件体积。2、减少css解析索引项,加快浏览器查找速度。

九、避免CSS表达式

CSS表达式是动态CSS属性,expression方法在其它浏览器中不起作用,单独针对Internet Explorer设置。
比如:#time{background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );}

功能强大,但消耗资源。如果不得不使用,那就使用一次性的expressions。 当第一次expression计算出一个明确的值,就让样式等于这个值,不再变动。如果样式的属性一定要动态的改变,就用时间句柄吧!

十、避免使用@import

加载外部css样式文件,一种是link,另一种是@import。

使用@import,浏览器不能并行下载样式,页面加载延迟。

link写法能够并行下载CSS,加快加载速度。应该简化及合并CSS文件以减少http请求数。

十一、避免AlphaImageLoader滤镜

IE独有属性AlphaImageLoader加载图片时它会终止内容的呈现并且冻结浏览器。使用PNG8格式代替。

如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本无效。

十二、把样式表放到顶部
如果放在地步,页面刚开始会没有任何外观,等html元素下载完,css外观才得以显示。

如果前面有大文件或大js,这个css渲染外观的时间会更加推迟。

把脚本之类放到底部。因为当脚本正在下载,浏览器不会下载其它东西。

十三、预加载

其它性能优化有:减少DNS查询,DNS 预取 、优化图像 、渐进的 JPGs、Spriting (精灵)、视网膜图像、完全不用图片 、减小文件体积,避免重定向,去掉重复的脚本。不要使用非图片原始尺寸来缩放图片。为HTML文档尽早指定字符编码。尽可能并行下载资源。

更新网址:http://feilong.org/best-efficient-css
最初发布:20130416 06:25:22 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站优化

新作:

旧文:

飞龙前端QQ群