jquery - jQuery変数のキャッシュとチェーンの奇妙なパフォーマンス

Question

変数のキャッシュとjQuery関数呼び出しの連鎖がパフォーマンスに優れていることをどこでも読んだことがあります。

しかし、私はいくつかの興味深い癖を示しているように見えるこのjsperfテストに出くわしました。

以下のテストケースをご覧ください。

ケース1：キャッシングなし

$(".myClass").css("color", "red");
$(".myClass").css("opacity", 1);
$(".myClass").css("display", "block");

ケース2：連鎖

$(".myClass").css("color", "red").css("opacity", 1).css("display", "block");

ケース3：オブジェクトキャッシング

var $myDiv = $(".myDiv");
$myDiv.css("color", "red");
$myDiv.css("opacity", 1);
$myDiv.css("display", "block");

ケース4：オブジェクトのキャッシュと連鎖

var $myDiv = $(".myClass");
$myDiv.css("color", "red").css("opacity", 1).css("display", "block");

ケース5：通常のjQuery

$(".myClass").css({
  color: "red",
  opacity: 1,
  display: "block"
});

テストケース別に並べた、私のコンピューター（Win7 FF18）でのパフォーマンステストの結果は次のとおりです。

（これらの結果は、他のブラウザーで行われた測定と一致しています。）

ご覧のとおり、テストケース1は予想された中で最も遅いものです。奇妙なことに、テストケース3が最も高速ですが、テストケース2、4、5も非常に低速です。

最大の驚きは、テストケース3がテストケース4よりもはるかに高速であることです。つまり、jQuery呼び出しをチェーンすると、パフォーマンスが大幅に低下します。

あなたはあなた自身のブラウザでこれに気づきましたか？

.css（）メソッドの特典かもしれませんが、個人的には、最近のJavascriptエンジンは、同じルートオブジェクトからの関数呼び出しのシーケンスを強化するために、特別なコード最適化をすでに行っていると思います。

どう思いますか？

score 1 · Accepted Answer

「オブジェクトキャッシング」テストは、実際には何も実行しないため、非常に高速です。

.myDivの代わりに、他のセレクターとは異なるセレクターを使用します.myClass。要素がない.myDivため、呼び出しは空の結果セットに作用しています。

その壊れたテストを修正すると、期待どおりの結果が得られます。セレクターの繰り返しは依然として最も遅く、他の4つのオプションはすべてほぼ同等で速度的に同等です。

1 に答える 1