CSS教程:CSS选择器性能

一些关于CSS选择器性能的讨论引起了我的兴趣。

第一个是Shaun Inman写的《合格的CSS选择器（CSS Qualified Selectors）》，实际上这篇博文并没有提到CSS性能，不过有一个来自David Hyatt(Safari 和 WebKit 的架构师,同时为 Mozilla, Camino, Firefox 工作)的评论：

如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

接下来的一篇博文很神奇。Jon Sykes做了一个系列的文章来测试CSS性能：第一部分, 第二部分, 第三部分，其中 第三部分非常值得一读。这使我确信优化CSS选择器是页面性能优化的一个关键步骤。

但是，有两件事一直困扰着我。首先，大量的DOM元素和CSS规则。页面包含60000个DOM元素和20000条CSS规则。这使浏览器非正常的运行（下面将证明这点）。下面的统计表格为美国10大网站的比较：

第二件困扰我的事情是测试以多大页面为基准？我想解决的问题是：无效率的CSS选择器会拖慢页面吗？所有测试的5个页面包含20000个a元素（嵌套在P, DIV, DIV, DIV内部）（译注：使用同样的HTML页面），不同的是CSS：基准（没有CSS）（译注：下图中的baseline），标签选择器（tag selector )（a标签有一条CSS规则）（译注：下图中的tag），20000个class选择器（cla

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