9

javascript / jQuery の最適化に関する一連の投稿を開始し、この興味深い結果に出くわしました。

jQuery オブジェクトを (キャッシュされた jQuery コレクションから検索して) 最小化すると、jQuery オブジェクトのインスタンスをさらに作成するよりも時間がかかるのはなぜですか?

私が準備したテストの結果を見て、私は唖然としました。$ インスタンスの作成を最小限に抑えるのは遅いといつも思っていました。

親をキャッシュするので、これは私が書くのに慣れているものです（私はそれを「appRoot」と呼んでいます）。

var appRoot = $("#appRoot");
    appRoot.find(".element1").css("color","red");
    appRoot.find(".element2").css("color","blue");

対

    $(".element1").css("color","red");
    $(".element2").css("color","blue");

テスト結果を参照してください (わずかに異なるシナリオ)。 キャッシュされたスニペットは、キャッシュされていないスニペットよりも遅いことがわかりました。

なぜ理解しようとしていますか？

4

3 に答える 3

3

find() 呼び出しが速度を低下させていると思います。

jQuery オブジェクトをキャッシュする唯一の理由は、それを複数回参照または操作する場合です。CSS プロパティを設定するだけで、そのプロパティがレンダリングされたページの存続期間中変更されない場合、キャッシュ変数を定義する理由はありません。

于 2011-07-12T20:28:53.113 に答える
2

テストに含まれるdivまたはその他のhtml要素が10未満であることを考慮する必要があります。最初の例のようにコードを書く理由は、セレクターを高速化するためですが、追加のメソッド呼び出しが必要になります。通常、セレクターは2つのうちではるかに高価であるため、ゲインはロスを上回りますが、DOMを使用すると、セレクターはどのように記述しても非常に安価になります。

人々はしばしば、より複雑で大きなDOMがコードのボトルネックを変えることを覚えていないという間違いを犯します。jsperfにはこれについて何らかの警告が必要だと思います。

于 2011-07-12T20:43:34.763 に答える
2

「より多くのjqueryオブジェクトが作成されました」で、jQueryは最近のAPIを直接使用できるためだと思います

document.getElementsByClassName("classvalue")

「少ない jquery」の場合は、見つかった要素が #appRoot の下にあることを常に確認する必要があり、これにはさらに時間がかかります。

ドキュメントを appRoot として使用する別のテストを次に示します。これは、2 回目の実行でギャップを少し埋めているようです:

于 2011-07-12T20:36:28.697 に答える