Question

我如何测试不同css选择器的性能基准？我读过像this这样的文章。但我不知道它是否适用于我的网站，因为他使用了一个包含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>

有些人会说（并且可能是对的）第二种选择会更快。

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

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

我的页面似乎是大约8KB，包含~1000个DOM元素。

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

欢迎提供帮助和欢迎！

Answer 1

查看Firefox的Page Speed扩展程序。为页面运行后，在“使用高效的CSS选择器”下，它会为您提供有关违规CSS选择器的列表以及简要说明。

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

Answer 2

通过阅读您列出的文章，看起来两种类型的选择器之间的区别并不值得担心。确保css足够清晰，可以理解它，并且只有在被证明是瓶颈之后才会担心速度。

Answer 3

确实没有必要这样做菜单1

你可以拥有一个css课程 navbar li

记住，外部css文件可以缩小和缓存，而html则不能。表现也是一个相对术语：他们经常访问吗？网络是否缓慢？他们是否使用运行IE6的古老计算机的员工？

Answer 4

我对如何构建页面速度测试程序的问题没有直接的答案。但是，我会为您提供一些最佳实践指南，以指导您朝着正确的方向前进。

页面大小会增加，因为所有具有类
的元素

由于两个原因，添加众多课程的规模可以忽略不计：
1）样式表中的附加大小将被缓存（假设你使用外部，你应该） 2）将大量类添加到DOM的HTML标记最多为1kb。如果它更多，那么你需要更好地利用继承。

css类的数量可以相当大的，需要更多的CSS 类解析

你会有更多的CSS类，是的......但是对CSS类的绑定规则实际上比使用后代或相邻选择器的选择更快。

只要尽可能合理地避免使用后代/相邻选择器，就可以使用外部样式表，并且利用继承来减少重复规则，您不必担心CSS性能压力测试。

如何测试CSS选择器性能？

4 个答案: