Html 如何测试CSS选择器性能？

我将如何测试不同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{背景：灰色；}
.navbar>li{显示：内联；背景：#ffffff；}

菜单1
菜单2
菜单3

。。。但我可以这样做

.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>

.navbar{背景：灰色；}
.navbar项{显示：内联；背景：#ffffff；}

菜单1
菜单2
菜单3

有人会说（也许是对的）第二种选择会更快

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

页面大小将增加，因为所有元素都有类

css类的数量可能会变得相当大，这将需要更多的css类解析

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

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

---

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

真的没有必要这么做 菜单1

你可以有一个css类 李国宝

---

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

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

页面大小将增加，因为 所有元素都有类

添加大量类的大小可以忽略不计，原因有两个：
1） 样式表中的额外大小将被缓存（假设您使用externals，您应该这样做）。

---

2） 向DOM添加大量类所产生的HTML标记最多为1kb。如果它比你需要的更多，你需要更好地利用继承

css类的数量可能会变得相当多 大的，需要更多的css 类解析

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

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

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

---

另外，Chrome还有另一个扩展-。除此之外，它还提供了对CSS样式重新计算和选择器匹配所花费时间的深入了解。这可能正是您想要的。

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

看看Firefox/Firebug的Google页面速度插件-这不是一个好的答案，但可能很有见地：我几周前才知道什么是标记桶，但它听起来对性能很有用。我想补充一点，谷歌创建了一个页面，重申了Stephan链接的Mozilla页面中的一些要点。8KB远远不是一个大尺寸。Bootstrap是这个大小的10倍。“向DOM添加大量类的HTML标记最多为1kb。如果超过1kb，则需要更好地利用继承。”。当你有一千个项目并且需要添加它们类时…这不是1kb。只要重复的实例在附近，gzip就能很好地处理重复的代码，所以大部分重复都是无害的。见：