CSS class 和 id 之间的处理速度差异

Question

对于这个问题，我只是比较浏览器在 2 个元素上渲染 CSS 的速度，这两个元素的不同之处在于一个有一个类，一个有一个 id。

（这与JS识别、锚点使用等无关）

<div class="myclass">classed element</div>
<div id="myid">ided element</div>

有人对此有数字吗？我已经读过 CSS id 更快，但是多少？我会冒险猜测它可以忽略不计，但知道它会很有趣。

Answer 1

http://oli.jp/2011/ids/

ID 的 在某些情况下更快，但不是全部

人们普遍认为 ID 选择器是最快的，但这有一个很大的警告：只有当 ID 是键选择器时，ID 才是最快的 CSS 选择器。那是什么？好吧，虽然您可能从左到右阅读选择器，但浏览器从右到左阅读它们。

这里还有针对您的号码请求的性能测试：http://oli.jp/2011/ids/#table1

结论

正确使用 ID 会更快，但与类的差异如此之小 - 不值得考虑。

在我看来，没有令人信服的理由在选择器中使用 ID 进行 CSS 样式¹，因为 CSS 类可以完成 ID 可以做的所有事情。希望你会同意有一些很好的理由不这样做。下次开始个人项目或重新设计自己的网站时考虑一下，并尝试添加一个类（或 ARIA 标志性角色）来代替样式。保存片段标识符或 JavaScript 挂钩的 ID