28

Web ブラウザーで JavaScript を使用する場合、次の点でパフォーマンスに違いはありますか?

既存の getElementById

document.getElementById("elem");

#id を使用したクエリ セレクター

document.querySelector("#elem");

[id=elem] を使用したクエリ セレクター

document.querySelector("[id=elem]");

最初のものが最速であると想定しています（IDで要素を検索するだけです）。また、最後のものは悪い習慣のように見えます。すべてに querySelector を使用するとコードが読みやすくなるため、2 番目の方法が気に入っています。

助言がありますか？

4

3 に答える 3

18

まず、

document.querySelector("#elem");

document.getElementId とは異なり、クラスを返すことができるという利点があります。ただし、そのクラス名を持つ最初のオブジェクトのみを返すという事実によって、これの有用性は大幅に低下します。したがって、そのクラス名を持つ最初のオブジェクトを特に探していない場合は、ID を使用することもできます。使用する場合は、

document.querySelectorAll

ただし、私は信じています (私は間違っているかもしれません)、そのクラス名を持つすべてのアイテムを配列として返します。通常の querySelector は querySelectorAll[0] と同等です。もう 1 つの利点は、それを介して css3 クエリを実行できることです。これは非常に便利です。

第二に、

document.getElementById("elem");

ほぼ5 倍高速であるという意味で、queryselector よりも優れた利点があるため、数千行のコードがあり、そのコードを最適化したい場合は、getElementById が最適です。

最後に、

document.querySelector("[id=elem]");

個人的には、これをどのような状況でも使用する必要はないと思います。querySelector が必要な場合は、単に # を使用しないのはなぜですか? これは querySelector の最初の例とまったく同じですが、役に立たない文字がたくさんあります。

編集：明確にするために、要約すると、おそらくdocument.getElementByIdを使用した方がよいでしょう。

于 2013-02-23T22:25:32.627 に答える
5

自分でテストできます。getElementById は最速のメソッドです

于 2013-02-23T22:25:19.607 に答える
3

パフォーマンスの違いはありますか

おそらく、それらは異なる機能であるためです。querySelectorに等しいことを検出する前に、少なくともセレクターを解析する必要がありますgetElementById。そして、この最適化が属性セレクターに対して行われるとは思えません。誰も使用していません。だから私はあなたの仮定を共有します。そしてテストはそれらを確認します（@Silver_Clashに感謝します）。

個人的には、2 番目のものは好きではありません。動的な ID 値を使用すると、あいまいでひどいものになるからです。明示的に使用するgetElementByIdと、より簡潔になります。

于 2013-02-23T22:26:56.190 に答える