CSS 选择器性能

这里的想法是比较不同的 CSS 编写风格，看看它们如何影响页面渲染。 因此，使用所有 ID、使用所有类、使用 OOCSS 技术等。 我之前提供了一些关于 最佳实践建议，但没有测试来支持任何内容。 所以对我来说，最有趣的部分是如何衡量测试。 测试的想法来自 Jon Sykes 的文章，他在文中写道

在 HTML 的最顶部，我会使用 Javascript 创建一个时间戳，这是所有操作的开始计时器。 然后，我会在一个 setInterval 上有一个函数，这样它就会循环，函数会使用 getElementById 检查一个 dom 元素，检查该节点是否存在，如果存在，它会检查该节点是否应用了样式，如果应用了，它会触发一个新的时间戳，标记开始和结束之间的差异，然后将其写出。

结果表明，与单独声明每个选择器及其属性和值相比，OOCSS 的速度要快得多。 甚至快到可以明显感受到速度差异。 此外，Opera 速度最快，Firefox 速度最慢（IE 未测试）。 但这真的是完美的测试吗？ 所有重复的属性和值不会增加 CSS 的大小吗？ 也许这就是它变慢的原因？ 据我所知，很难只测试选择器的速度。

直接链接 →