如何测试 CSS 选择器的性能？答案

【问题标题】：How to test CSS selector performance?如何测试 CSS 选择器的性能？
【发布时间】：2011-04-03 06:35:54
【问题描述】：

我将如何测试不同 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？具体怎么样？

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

【问题讨论】：

看看 Firefox/Firebug 的 Google Page Speed 插件 - code.google.com/speed/page-speed
不是一个体面的答案，但可能很有见地：developer.mozilla.org/en/Writing_Efficient_CSS 我几周前才知道标签桶是什么，但听起来对性能很有用。
只是想补充一点，Google 创建了一个页面，该页面重申了 Stephan 链接的 Mozilla 页面中的一些要点。 developers.google.com/speed/docs/best-practices/rendering
8KB 远不是大尺寸。 Bootstrap 是那个大小的 10 倍。

标签： html css performance

【解决方案1】：

从阅读您列出的文章来看，这两种选择器之间的差异似乎不值得担心。确保 css 足够清晰以理解它，并且在证明是瓶颈之后才担心速度。

【讨论】：

【解决方案2】：

查看 Firefox 的 Page Speed 扩展。一旦你为一个页面运行它，在“使用高效的 CSS 选择器”下，它会给你一个有问题的 CSS 选择器的列表以及简要的解释。

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

【讨论】：

【解决方案3】：

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

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

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

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

您将拥有更多的 CSS 类，是的...但是将规则绑定到 CSS 类实际上比使用后代或相邻选择器的替代方法更快。

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

【讨论】：

"向 DOM 添加大量类的 HTML 标记最多为 1kb。如果超过，则需要更好地利用继承。"。当你有一千个项目并且需要添加它们的类时......它不是 1kb。
大部分重复将被渲染为无害的，因为 gzip 可以很好地处理重复的代码，只要重复的实例就在附近。见：superuser.com/a/479168

【解决方案4】：

真的没必要菜单 1

你可以有一个 CSS 类导航栏里

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

【讨论】：