jquery類選擇器vs合格的類選擇器

我目前正在編寫有關webperformance的bachelorthesis，並且遇到了一些我沒想到的結果。jquery類選擇器vs合格的類選擇器

由於Paul Irish或jquery本身建議最好從id下降。

所以我本來期望的是$（」一流 '）應該慢於$（' ＃ID級別 '）或$（' ＃ID '）。找到（' 一流）。

我測試jsperf來到了一個漂亮的野趣結果：

好像它真的取決於瀏覽器，但我真的沒想到$ （'.class'）的表現非常好，特別是在Chrome上，它比從ID中下降的人快得多。

對我來說有意義的是下面的解釋，但爲什麼這些瀏覽器的差別如此之大。發動機如此不同？

的區別使用單一類或ID查找，getElementsByClassName方法和的getElementById可以使用其比querySelector方式更快時是。你會發現它在現代瀏覽器中快10倍。

那麼什麼是對你的看法？

2014-12-30 haeki

那（強烈）表明，現代瀏覽器還緩存類的條目（以及自己平時的快ID查找表）。任何額外的代碼開銷（添加一個id搜索）會減慢它的速度。很高興知道。 –

針對下面唯一真實的問題添加了一個答案，因爲您已經公開了一條非常有用的信息。 +1 :) –

在回答你的問題的唯一真正的問題：「這對我來說很有意義如下解釋，但爲什麼是差異在這些瀏覽器這麼大是引擎如此不同？」

答案當然是「是」。這3種瀏覽器都來自不同的代碼庫，不同的編碼方法會導致顯着不同的速度差異。例如「問3個編碼器的解決方案，你會得到3個不同的解決方案。」 :)

要注意的最重要的事情是類只搜索實際上是對現代瀏覽器速度非常快，儘管建議相反。添加額外的檢查（即使是ID選擇器）也只會減慢班級搜索的速度。這意味着即使不是全部，大多數現代瀏覽器都會保留類與元素的緩存。這可能是爲了更快的CSS處理，但副作用也是快速的基於類的搜索。

2015-01-03 20:20:41

回答