CSS教程:CSS选择器性能

接下来调整为：

• 2000个a标签和2000条CSS规则（原先是20000），这实际上有6000个左右的DOM元素，因为a嵌套在P, DIV, DIV, DIV内部
• 基准页面和标签选择器页面像其他页面一样有2000条CSS规则，不过只有简单的class规则生效，不会影响其他含有class属性的标签

我在12个浏览器上进行了测试 。页面呈现时间是用嵌在头部和底部的脚本来测量（所有测试在本地运行）。测试结果如下图（我没有测试Oprea 9.63，你可以下载csv格式的数据， 这里是测试页面）：

性能随浏览器而改变；奇怪的是，两个新浏览器IE 8 和 Firefox 3.1反而是最慢的 所有测试是在同一台PC机的不同浏览器，不同PC机的不同浏览器可能有不同的性能特点。这个测试的目的不是比较各浏览器的性能，而是为了测试浏览器如何处理逐渐复杂的CSS选择器。

【修订：更深入的比较Firefox 3.0和3.1，我发现这台PC上的Firefox 3.1和IE 8逊于其他PC机。即使再进行测试，也会由于不同PC的硬件差异导致不同的结果，所以，不要用这些数据来比较浏览器。】

毫不意外，越复杂的页面（子选择器和后代选择器）通常性能越差。最大的意外在于第四个页面居然是最差的。所有的浏览器平均慢了50毫秒，观察最大的(IE 6&7, FF3)平均只有20毫秒。对现在70%+的用户来说，改进CSS选择器只能提高20毫秒。

请记住，这些测试接近最坏的情况。20个a标签嵌在P, DIV, DIV, DIV导致总共有6000个DOM元素，这是10大站点中最复杂两个网站（见表一）的两倍大。另外，测试的页面含有2000个极端无效的CSS规则，一般的网站大约有三分之一（译注：网站本身的CSS规则）的子选择器及后代选择器。以Fackbook为例，2882个CSS规则里只有750个极端无效的规则。

为什么我的测试结果和之前其他人的有些不同？一个不同来自于这极其极端。它成倍的放大于我们通常所用的页面。在这种情况下，浏览器面对3M的页面，60000个DOM元素及20000条CSS规则会有不同的表现。我注意到，我的测试结果在IE6&7中非常不同。我想知道IE在处理CSS选择器时是否某个规则。为此我测试了子选择器和后代选择器页面，从1000至20000逐渐增加a标签和CSS规则的数量，结果如下图所示，IE在18000条CSS规则

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