javascript - jQueryチェーニングは個別のステートメントよりも高速ですか?

Question

jQuery 関数への個別の呼び出しを作成するか、単一のチェーンを使用する方が高速ですか? 一方が他方よりも速い理由の追加説明があれば、それは大歓迎です:-)

例：

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

より速い/遅い

$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

Answer 1

あなたの例では、連鎖はより高速です。

// Example 1
$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

// Example 2
$('#blah_id').niftyjQueryMethod1();
$('#blah_id').niftyjQueryMethod2();

例 1 では、jQuery オブジェクト ( $('#blah_id')) を作成するための呼び出しは 1 回だけ行われます。例 2 では、2 回作成されます。これは、2 番目の呼び出しが遅くなることを意味します。

それらをすべてチェーンに入れたくない場合は、選択を変数にキャッシュできます。

var blah = $('#blah_id');
blah.niftyjQueryMethod1();
blah.niftyjQueryMethod2();

メソッドがセレクションのセレクションに存在する要素 (たとえば、parent、find、またはfilterdo など) に影響を与えないと仮定すると、これは例 1 とほとんど同じになります。

Answer 2

これ：

$('#blah_id').niftyjQueryMethod1().niftyjQueryMethod2();

おそらくこれよりも高速です：

$('#blah_id').niftyjQueryMethod1(); $('#blah_id').niftyjQueryMethod2();

しかし、チェーンのせいではありません。これは、セレクタ ルックアップにコストがかかるためです。

これ：

var $blah = $('#blah_id');
$blah.niftyjQueryMethod1();
$blah.niftyjQueryMethod2();

おそらく、最初の例と速度に大きな違いはありません。

Answer 3

最初の方が速いです。2 番目のセレクターでは、jQuery オブジェクトを 2 回作成しています。$('#blah_id')キャッシュされて変数として保存され、var $blah = $('#blah_id')2 番目のセレクターで $blah として使用されていない場合、実際の違いはありません$('#blah_id')。

Answer 4

検出された DOMElement ( を介して$('#blah_id')) はフォーム関数から関数に直接渡されるだけなので、連鎖は高速です。

それらを分離すると、DOMElement を何度も何度も見つける必要があります。どれ$("selector")も悪です。できるだけ頻繁にそれらを避けるようにしてください。

以前に見つかったオブジェクトへの参照を設定することもできます:

var myElement = $('#blah_id');

myElement.doSomething();