处理CSS类和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才是最快的CSS选择器.那是什么？好吧,虽然您可能从左到右阅读选择器,但浏览器会从右到左阅读它们.

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

结论

ID的正确使用速度更快,但与类相比差别很小 - 不值得考虑.

在我看来,没有令人信服的理由在CSS样式的选择器中使用ID,因为CSS类可以做所有ID都可以.希望你会同意有一些很好的理由不这样做.在下次启动个人项目或重新设计自己的网站时考虑一下,并尝试添加一个类(或ARIA地标角色)来代替样式.保存片段标识符或JavaScript钩子的ID