私は、IDを持つ要素の内部にある要素のクラスを選択する方が速いのだろうかと思います。例えばclass="list"とid="list"とulとli要素、我々はリストを持っているとしましょう、そして、（練習および/またはより良い）より高速である：JavaScriptのid +クラスとクラスセレクターのパフォーマンス
document.GetElementById('list').getElementsByClassName('list')
または
document.getElementsByClassName('list')
私は承知しています前者は#list要素内の要素のみを対象としていますが、そのクラスがドキュメント全体に対して一意であるとします。
getElementsByClassNameは、検査されるクラス名の存在をチェックするためにすべての要素を検査する必要があるため、O（n）操作です。 nが制限されている場合、速度は増加しますが、操作の全体速度が依然としてO（n）になるため、速度の差はわずかです。
結果として、これはマイクロ最適化の例です。いずれも大幅に高速です。サブセレクタを使用することは、スピードの考慮事項に関してページのスタイリング部分を区別するために、ページの構成に関連する必要があります。
'getElementsByClassName'が* O（n）*であるかのようにコードするのはおそらく賢明ですが、ブラウザは個々のDOMの初期化と更新でそのコストを効果的に償却する内部データ構造を保持することがあります。 – Pointy
@Pointy - ブラウザにはクラス名による要素の内部キャッシュがあり、ページの読み込み時に読み込まれ、ページが変更されると更新されると思いますか？そのようなプロセスやアプローチを記述している資料へのリンクがありますか？私はクロムのエンジンが積極的にパフォーマンスを向上させることを知っていますが、私はクラス名が舞台裏で使われていることは聞いたことがありません。 –
まあ、人々が「DOMが遅い」と言っても、現代のブラウザは、親エレメントからクラスを追加/削除するようなことをやって、暗黙のCSS更新をたくさん引き起こします。私はブラウザの実装者ではありませんが、巨大なCSSルールセットと大きなDOMを持つ世界では、何か*する必要があります*。しかし、私はちょうど半教育の推測をしていることを認めます。 – Pointy
クラス名による要素の取得がそのリスト要素に制約されるため、最初の要素が最も速くなければなりません。しかし、ブラウザが要素を内部的にどのように索引付けするかによって異なります。
あなたがここにいくつかのベンチマークを実行することができます。http://jsperf.com/javascript-select-by-id-vs-by-class
を私のテストでは、第2のアプローチは、ChromeとIEに速かったが、FFでほぼ同じ。これが意味することは、クラス名とFFに基づくChromeとIEのインデックス要素は、ほとんどがそれに就いていないか、貧弱な仕事をしているということです。
一部のブラウザでは、最初の方が高速ですが、知る方法は1つだけです。 –
この質問は、テストが事実に基づいているため、主に意見ベースではありません。 – theoutlander