CSS 性能调优

　　清单 7. 尽量避免 universal rules

[hidden="true"] { ... } /* A universal rule */   

　　这里的匹配规则很明显：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。

　　清单 8. Id-categorized 规则与 tag name 或 class 规则并行

button#goButton {...};----->>#goButton  
.fundation#testIcon {...};----->>#testIcon  

　　这里，按照我们常规的理解，箭头左边的写法似乎是应该更快的，因为它的限制更多。其实不然，id 是全局唯一的，在匹配 CSS 选择器时浏览器定位到 id 是最快的，如果伴随有其他的非 id 的 selector，反而会影响匹配的效率。

　　清单 9. 关于 class-categorized 规则

button.indented {...}----->>.button-indented {...}  

　　程序员们经常会给某个 Class 前面加上标签名称(Tag Name)，以更精确且快速的定位该节点，但是这样往往效率更差。和清单 8 中的原理一样，页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况，做到样式与元素的分离，两者独立维护。

　　清单 10. 尽量减少规则数量

Span[mailfolder="true"] > table > tr > td.columnClass {...}  
 
------------------->>>>>>>  
 
.span-mailfolder-tbl-tdCol {...}  

　　规则越多，匹配越慢，上面一种规则需要进行 6 项匹配，先找“columnClass”，再找“td”，然后是“tr”，“table”，最后是符合“mailfolder”为“true”的 span，这种效率是非常慢的。如果用一个比较特殊的 class 替代(span-mailfolder-tbl-tdCol)，效率会快上好几倍。

　　清单 11. 尽量避免使用 descendant selector

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}  

　　Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。

　　清单 12. 利用 CSS 的继承机制

Color  
Font  
Letter-spacing  
Line-height  
List-style  
Text-align  
Text-indent  
Text-transform  
White-space  
Word-spacing  
 
#bookmark  > .menu-left {list-style-image: url(blah)}  
 
------------>>>>>>>>  
 
#bookmark  {list-style-image: url(blah)}  

　　在 CSS 中，有很多 C

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!