2

ヘッダー付きのセクションがあります。ヘッダーをクリックすると、その下のセクションが折りたたまれて展開されます。スタイリングの目的で、クラスもヘッダーに適用または削除されます。これらのセクションとヘッダーは9つあります。

$('.header').click(function() {
        $(this).toggleClass('open');
        $(this).next().slideToggle();
});

モバイルデバイスのパフォーマンスを改善しようとしています。私はページの読み込み時間を意味するのではなく、アニメーションの滑らかさと、ヘッダーに触れてからアニメーションが起動するまでの遅延を意味します。

IDの使用はクラスよりも高速であることを読みました。次はどれくらい速くなりますか？（注意してください、それは9回繰り返される必要があり、最初の2つを示しています）。また、IDを使用する方が.next（）でDOMをトラバースするよりも高速であると想定していますが、これによってどの程度の違いが生じますか？

$('#header1').click(function() {
        $(this).toggleClass('open');
        $('#section1').slideToggle();
});

$('#header2').click(function() {
        $(this).toggleClass('open');
        $('#section2').slideToggle();
});

注意してください、私はそれが少し松葉杖であることを知っていますが、私はプレーンJavaScriptではなくjQueryを使用したいと思います。jQueryライブラリは、サイトの他の場所で使用されているように、とにかくロードされます。ありがとう

4

4 に答える 4

2

それはまったく問題ではありません。[someattribute]IDルックアップは確かに最速ですが、最近のブラウザーはセレクターベースのルックアップを最適化しているため、ドキュメント全体を反復処理する必要があるもの（セレクターなど）を実行しない限り、すべてが非常に高速です。

ただし、$('.header')コードを繰り返す必要がないため、これが最適な方法です。それに加えて、より読みやすくなっています。2番目の例では、DOMを確認しないと、影響を受ける要素がどこにあるかさえわかりません。

したがって、最適化する必要のないものを最適化しようとするのではなく、コードをクリーンで保守しやすい状態に保ちます。

于 2012-05-04T09:49:28.440 に答える
1

2番目の方法はわずかに高速ですが、コードの醜さと保守性の欠如により、わずかなゲインは打ち消されます。

最初のオプションを使用します。

于 2012-05-04T09:50:20.047 に答える
1

技術的に：
ID参照メソッドは、をサポートしていないブラウザでのはるかに高速なDOMルックアップgetElementByClassNameです。ただし、2倍の量のコードを解析し、2つのクリックハンドラーを適用する必要があるため、これは相殺されます。.live（）は本体にバインドするだけで、後でルックアップを実行するため、さらに高速になる可能性があります。

実際には：
ごくわずかな違いです。これはマイクロ最適化の領域です。コードには、おそらくこれよりもはるかに大きな速度の要素があります。

于 2012-05-04T09:52:03.227 に答える
0

セレクターとしてのIDの方が高速ですが、保守性のために、重複したコードが本当に必要ですか？

于 2012-05-04T09:49:38.700 に答える