6

私の質問は、DOM解析がトリガーされることに関連しています。なぜ、クラスセレクターよりもCSSIDセレクターを使用する方が速いのか知りたいです。DOMツリーを再度解析する必要があるのはいつですか。また、どのようなトリックとパフォーマンスの強化を使用する必要がありますか...また、誰かが私に次のようなことをすると言った

var $p = $("p");  
$p.css("color", "blue"); 
$p.text("Text changed!");

それ以外の

$("p").css("color", "blue");  
$("p").text("Text changed!");

パフォーマンスが向上しますが、これはすべてのブラウザに当てはまりますか？また、DOMツリーが再解析されたかどうかをどのように知ることができますか？

4

3 に答える 3

10

セレクター#idはクラス セレクターよりも高速です。その理由は次のとおりです。(a) 指定された id 値を持つ要素は 1 つだけです。(b) ブラウザーは map を保持できるid -> elementため、#idセレクターは 1 回のマップ検索と同じくらい迅速に機能します。

次に、上記で提案した最初のオプションは、2 番目のルックアップを回避するため、明らかに高速です。これにより、セレクター ベースのルックアップの合計時間が 2 分の 1 に短縮されます。

最後に、Chrome 開発者ツールのセレクター プロファイラー([プロファイル] パネル内) を使用して、ブラウザーがページ内のセレクターを処理するのにかかる時間をプロファイリングできます (一致 + 一致する要素にスタイルを適用します)。

于 2012-04-17T14:06:12.593 に答える
1

疑問がある場合はいつでも、独自のパフォーマンス テストを作成することをお勧めします。その方法の詳細については、JavaScript コードのパフォーマンス テストをどのように行いますか?を参照してください。. 自分でパフォーマンスをテストしたら、その結果を決して忘れることはありません。

特に、特定の$()jquery セレクターで関数を実行するには、一致する DOM ノードを取得する必要があります。これがどのように機能するのか正確にはわかりませんがdocument.getElementById()、document.getElementsByTagName()とその他の組み合わせだと思います。これには、どんなに小さくても処理コストがかかります。一度だけ呼び出して再利用すれば、処理時間をいくらか節約できます。

于 2012-04-17T14:07:37.207 に答える
1

ID を持つ要素は 1 つだけですが、多くの要素がクラスを共有する可能性があり、それらを検索する必要があるため、ID セレクターはクラス セレクターよりも高速です。

以下のコードは不必要に DOM を 2 回解析しているため、もちろん遅くなります。

$("p").css("color", "blue");  
$("p").text("Text changed!");
于 2012-04-17T14:08:07.130 に答える