针对CSS的性能,有一些最佳实践:
把样式表放在文档HEAD标签中以提升页面的逐步渲染速度
不要在IE中使用CSS表达式,因为它们可能会被执行成千上万次,从而导致打开页面的速度变慢
避免使用过多的行内样式,因为这会增加下载页面内容的大小
使用低效CSS选择符
CSS选择符的编写方式决定了浏览器必须执行的匹配次数,而某些类型的CSS选择符将会导致浏览器尝试更多匹配,因此开销比简单选择符更高
避免使用通配规则
除了传统意义上的通配符之外,Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到通配规则下。他推荐仅使用ID、类和标签选择符
不要限定类选择符
li.chapter改成.li-chapter,或是.list-chapter更好
让规则越具体越好
不要试图编写像OL LI A这样的长选择符,最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上
避免使用后代选择符,子选择符是更好的选择
避免使用子选择符
质疑子选择符的所有用途
尽可能用具体的类取代它们
依靠继承
了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则
div div div p a.class0007
关键选择符是a.class0007,页面中只有一个元素匹配这个关键选择符,所以匹配这个选择符所需要的时间是极少的
a.class0007 div
#id0007 > a
.class0007 [href]
div:first-child
当用户和页面交互时,浏览器应用样式和布局元素所花费的时间,这又叫回流时间
当使用javascript修改dom元素样式的某些属性时会触发回流
回流并不需要涉及页面上的所有元素,浏览器已为此进行了优化,仅仅只对那些受回流影响的元素重新布局。如果元素时文档的body或其他一些有很多后代的元素,那么回流的开销一定会相当高
杜绝低效css选择符的影响,不仅要考虑页面加载时间,也要考虑用户和web 2.0应用交互时如何使用样式进行表现
将每个受影响元素的后代选择符替换成类选择符,不仅会增加页面大小,还会降低样式的灵活性。最需要修正的选择符是那些可以匹配大量元素的关键选择符(最右边的选择符)