☰

JQuery 要素 + クラスセレクターのパフォーマンス 質問する

tag-icon • tag-icon jquery jquery-selectors performance
JQuery 要素 + クラスセレクターのパフォーマンス 質問する

要素を選択するときにパフォーマンスが向上することを$('#childDiv2 .txtClass')期待していました。しかし、これによると$('#childDiv2 input.txtClass')<input type="text" id="txtID" class="txtClass"/>パフォーマンス分析 $('.txtClass');は、この中で最適なセレクタです。私は JQuery 1.7.2 を使用しています。これについて説明できる人はいますか?

クラスセレクタのパフォーマンス分析

html

<div class="childDiv2">
    <input type="text" id="txtID" class="txtClass"/>
    <p class="child">Blah Blah Blah</p>
</div>​

JS

$('.txtClass');
$('#childDiv2 .txtClass')
$('#childDiv2 > .txtClass')
$('input.txtClass')
$('#childDiv2 input.txtClass')

ベストアンサー1

現代のブラウザは非常に効率的なクラス名による要素の取得()指定されたクラスを持つ要素を返すメソッド。これが、このケースでは単一のクラス セレクターの方が高速である理由です。

あなたの例を詳しく説明すると:

$(".txtClass")                  =>  getElementsByClassName()

$("#childDiv2 .txtClass")       =>  getElementById(),
                                    then getElementsByClassName()

$("#childDiv2 > .txtClass")     =>  getElementById(),
                                    then iterate over children and check class

$("input.txtClass")             =>  getElementsByTagName(),
                                    then iterate over results and check class

$("#childDiv2 input.txtClass")  =>  getElementById(),
                                    then getElementsByTagName(),
                                    then iterate over results and check class

ご覧のとおり、最初のフォームが最新のブラウザで最も高速になるのは当然のことです。

おすすめ記事