2

私は現在、jQueryコードで非常に明示的なセレクターを書いています。たとえば、このマークアップを考えると

<div class="codeblue">
    <div class="codeyellow">
        <div class="codeorange">
            <div class="codewhite">
                <select id="codeChoice">
                    <option>red</option>
                    <option>green</option>
                    <option>black</option>
                </select>
            </div>
        </div>
    </div>
</div>

この明示的なセレクターを使用します

var $select = $('.codeblue .codeyellow .codeorange .codewhite #codeChoice');

代わりにこれを行う方が良いでしょうか？

var $codeBlue = $('.codeblue');
var $select = $codeBlue.find('#codeChoice');

明示的なセレクターを使用しないことによるパフォーマンスへの影響はありますか？

4

4 に答える 4

13

実際、IDは一意であるため、最初からIDを選択するだけで済みます。

var $select = $('#codeChoice');

他の質問に関する限り、簡単な答えはありません。複数のセレクターは速度低下を引き起こす可能性がありますが、実際に知っておく必要があります。また、ブラウザによって異なります。チェックアウトするための最善の策は、http：//jsperf.com/を使用することです。

また、これに記載されているように、次のように、特定性の低いセレクターを左側に配置する必要があります。

var $codeBlue = $('.codeblue #codeChoice');
于 2012-10-22T17:26:15.477 に答える
2

具体的なIDを使用する場合、jQueryはネイティブメソッドdocument.getElementById（）を使用するため、より高速になります。最初のセレクターには4つのクラス（=低速検出）と1つのID（=高速検出）が含まれ、2番目のセレクターには1つのクラス（=低速検出）と1つのID（=高速検出）が含まれるため、2番目のセレクターは高速になります。

一般的に、含まれるピースが少ないほど、セレクターは高速になります。

于 2012-10-22T17:27:17.140 に答える
0 
var $select = $("#codeChoice");

idユニークでなければならないので、十分なはずです

于 2012-10-22T17:26:47.723 に答える
0

jQueryで要素を選択する最も速い方法は、IDによるものです。Idで要素にアクセスすると、パフォーマンスが向上します。IDはページ上で一意であるため。

高性能Javascriptブック

var $select = $('#codeChoice");
于 2012-10-22T17:27:21.743 に答える