问题 id vs class selection benchmark


有没有人用CSS和javascript标记选择带有id和class的元素?

有意义的是,具有id的元素比具有类的元素更快,即使它是该类的唯一元素也是如此。

我真的需要担心吗?


11382
2018-04-01 11:14


起源



答案:


搜索时 id,选择器会在找到匹配后立即停止(即使有很多) - 我假设有一些键/值查找表用于此目的,因为它比DOM遍历快得多。 这就是原因,这是摘录:

它仍然很多   最好通过ID选择...因为   jQuery使用浏览器的原生   方法(getElementByID)来做到这一点   不必做任何自己的DOM   遍历,这要快得多。

链接的结果表明,速度提高了100倍 id VS class

搜索时 class,搜索整个DOM(或范围)。 这是使用范围的基准

您可以在自己的浏览器中对选择器进 这里


10
2018-04-01 11:24



你可以用参考来支持吗? - zaf
即使是搜索整个DOM :first 用作选择器? > < - Matt
@Matt那是jquery,而不是javascript;) - Andy
@zaf尝试一下 - 在页面上放置多个ID并测试输出,你只能得到一个。我也会找到你的参考! - Andy
奇怪的是,使用BBC的主页作为测试场(大量DOM),我选择了带有类的元素 .hpMod.altcolour2.hpCo 1000次,花了223ms。我又做了,但是 first 添加了,它花了323ms>。<。 document.getElementById(“i),这是我抢走类的元素,整体耗时1ms;选择元素1000次。 - Matt


答案:


搜索时 id,选择器会在找到匹配后立即停止(即使有很多) - 我假设有一些键/值查找表用于此目的,因为它比DOM遍历快得多。 这就是原因,这是摘录:

它仍然很多   最好通过ID选择...因为   jQuery使用浏览器的原生   方法(getElementByID)来做到这一点   不必做任何自己的DOM   遍历,这要快得多。

链接的结果表明,速度提高了100倍 id VS class

搜索时 class,搜索整个DOM(或范围)。 这是使用范围的基准

您可以在自己的浏览器中对选择器进 这里


10
2018-04-01 11:24



你可以用参考来支持吗? - zaf
即使是搜索整个DOM :first 用作选择器? > < - Matt
@Matt那是jquery,而不是javascript;) - Andy
@zaf尝试一下 - 在页面上放置多个ID并测试输出,你只能得到一个。我也会找到你的参考! - Andy
奇怪的是,使用BBC的主页作为测试场(大量DOM),我选择了带有类的元素 .hpMod.altcolour2.hpCo 1000次,花了223ms。我又做了,但是 first 添加了,它花了323ms>。<。 document.getElementById(“i),这是我抢走类的元素,整体耗时1ms;选择元素1000次。 - Matt


我不认为你应该真的那么关心:选择 id 和选择 class 只是没有相同的含义:

  • 如果您想要选择一个元素,知道如何唯一地识别它,请使用它 id
  • 如果你想选择一个或多个元素,知道可能有多个元素,请注意有一种方法可以唯一地识别它/它们,使用 class


不过,这是一个你可能感兴趣的基准: 速度/有效性选择器测试框架。


6
2018-04-01 11:18



感谢您的链接 - 消化数据可能需要一些时间!我倾向于过度使用对我有用的“课堂”,因此问题。 - zaf
+1链接 - pixeltocode