高性能CSS写法探讨
feilong.org 修订于2013-04-16 06:25:22 314 次浏览编写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文档尽早指定字符编码。尽可能并行下载资源。
更新网址：https://feilong.org/best-efficient-css
最初发布：20130416 06:25:22 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站优化