2009年6月19日星期五

[翻译]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规则 DOM元素
AOL 2289 1628
eBay 305 588
Facebook 2882 1966
Google 92 552
Live Search 376 449
MSN 1038 886
MySpace 932 444
Wikipedia 795 1333
Yahoo! 800 564
YouTube 821 817
平均值 1033 923

第二件困扰我的事情是测试以多大页面为基准?我想解决的问题是:无效率的CSS选择器会拖慢页面吗?所有测试的5个页面包含20000个a元素(嵌套在P, DIV, DIV, DIV内部)(译注:使用同样的HTML页面),不同的是CSS:基准(没有CSS)(译注:下图中的baseline),标签选择器(tag selector )(a标签有一条CSS规则)(译注:下图中的tag),20000个class选择器(class selectors)(译注:下图中的class),20000个子选择器(child selectors)(译注:下图中的child),20000个后代选择器(descendant selectors)(译注:下图中的descendant)。后面3个页面的大小都超过了3M,而基准及标签选择器的页面则只有1.8M。

接下来调整为:

  • 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规则时陡增。但是IE 6&7 渲染页面更接近实际,因为在我的测试中,他们的性能竟然是最高的。

基于这些测试我有以下假设:对大多数网站而言,优化CSS选择器活得的性能提升很小,不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题(offsetWidth, :hover)。

译注:

  • 这是本人的处女翻
  • 并非一字一句的直翻,原则是尽量保留有用的内容
  • 水平有限,难免糟蹋了大师的作品,有疑问请自行到原文查阅

1 条评论:

Unknown 说...

应该是处男翻