如何测试CSS选择器性能？

Question

我将如何测试不同css选择器的性能基准？我读过类似的文章这样.但我不知道它是否适用于我的网站,因为他使用了一个包含20000个类和60000个DOM元素的测试页.

我是否应该关心,根据您采取的css策略,性能是否真的降级了很多？

举个例子,我喜欢这样做......

.navbar { background:gray; }
.navbar > li { display:inline;background:#ffffff; }

<ul class="navbar">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

......但我能做到这一点......

.navbar { background:gray; }
.navbar-item { display:inline;background:#ffffff; }
<ul class="navbar">
  <li class="navbar-item">Menu 1</li>
  <li class="navbar-item">Menu 2</li>
  <li class="navbar-item">Menu 3</li>
</ul>

有些人会说(也可能是对的)第二种选择会更快.

但是如果你在所有页面上乘以第二种方法,我会发现以下缺点:

1. 页面大小将增加,因为所有元素都有类
2. css类的数量可能会变得非常大,这需要更多的css类解析

我的页面似乎是~8KB,有~100个DOM元素.

所以我真正的问题是如何创建一个测试床,我可以根据实际网页大小的策略测试性能增量？具体来说,我如何知道页面显示需要多长时间？JavaScript的？怎么样？

欢迎提供帮助和简单的意见!

Answer 1

查看Firefox 的Page Speed扩展程序.在为一个页面运行它之后,在"使用高效的CSS选择器"下,它会为您提供一系列有问题的CSS选择器以及简要说明.

此外,Chrome还有另一个扩展 - Speed Tracer.除此之外,它还可以深入了解CSS样式重新计算和选择器匹配所花费的时间.这可能正是您所寻找的.