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

时间:2015-06-24 12:42:02

标签: html css dom css-selectors

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

(这与JS识别,锚点使用等无关。)

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

有没有人有数字?我已经读过CSS ID'更快',但是多少?我会冒险猜测它可以忽略不计,但知道它会很有趣。

1 个答案:

答案 0 :(得分:12)

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

在某些情况下,

ID的 更快,但不是全部

  

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

此处还有针对您的号码请求的效果测试:http://oli.jp/2011/ids/#table1

<强>结论

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

  

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