CSS 性能调优

　　Multiple Declarations

　　关于 CSS 的 class 声明和定义，也有简写的方式

　　清单 4. Class 的声明

.Class1{position: absolute; left: 20px; top: 30px;}  
.Class2{position: absolute; left: 20px; top: 30px;}  
.Class3{position: absolute; left: 20px; top: 30px;}  
.Class4{position: absolute; left: 20px; top: 30px;}  
.Class5{position: absolute; left: 20px; top: 30px;}  
.Class6{position: absolute; left: 20px; top: 30px;}  
 
 -------------------->>>>>>>  
 
 .class1 .class2 .class3 .class4 .class5 .class6{  
 Position: absolute; left: 20px; top: 20px;  
 }  

　　这种 Class 简写的方式可以极大的缩减我们的代码，提高浏览器分析识别的效率。

　　CSS 选择器 (CSS Selectors)

　　先来看看下面这个例子：

　　清单 5. Child selector

#toc > li {font-weight: bold}  

　　按照我们惯常的理解，编译器应该是先查找 id 为“toc”的节点，然后在他的所有直接子节点中查找类型(tag)为“li”的节点，将“font-weight”属性应用到这些节点上。

　　但是，不幸的是，恰恰相反，浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。

　　由此可知，CSS 选择器的匹配远比我们想象的要慢的多，CSS 的性能问题不容忽视。

　　清单 6. Descendant selector

#toc  li {font-weight: bold} 

　　这个效率比之前的

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