8

最近、jQueryのパフォーマンスに関するいくつかの記事を読みましたが、奇妙な質問がいくつかありました。

  • キャッシュできますか/キャッシュする必要があり$(window)ますか？

    もしそうなら、それは、、、、 ...などに影響しますかresize？scrollwidthscrollTop

  • キャッシュできますか/キャッシュする必要があり$(document)ますか？

    多くのマウスアクションを使用しているので、実行する必要がありvar doc = $(document);ますか？

  • 常に$(this)大きなコードブロックにキャッシュできますか？

    とvar self = $(this);は、どのような状態でself違うの$(this)でしょうか？

4

3 に答える 3

9

3 つの質問すべて:はい、できます。

必要なもの： いいえ

パフォーマンスの向上:たぶん

ベンチマークを試すことができます。ただし、キャッシュの理由は、DOM 全体でセレクターを検索することではありません。ドキュメントとウィンドウの検索は、2 つのルート変数であるため問題ありません。$(this) のキャッシュは状況によって異なります。私の2番目のヒントを参照してください。

クエリを実行する親オブジェクトを常にキャッシュします。

var header = $('#header');
    
var menu = header.find('.menu');
// or
var menu = $('.menu', header);

セレクターをキャッシュするよりも、jQuery メソッドをチェーンする方が適切です。

$('li.menu-item').click(function () {alert('test click');})
                     .css('display', 'block')
                     .css('color', 'red')
                     fadeTo(2, 0.7);

頻繁にクエリを実行するキャッシュ要素:

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

無料の余分なパフォーマンスのヒント:

セレクターは最も速いものから最も遅いものへ:

Id > Tag > classes
于 2013-02-12T16:22:46.833 に答える
3

  1. はい、$(window) をキャッシュできます。これはパフォーマンスに役立ちます。
    誰かがすでに jsperf でテストを行っています。 http://jsperf.com/jquery-window-cache

    テスト結果はちょっとめちゃくちゃですが、ブラウザで「テストを実行」して違いを確認できます。

  2. はい、$(document) もキャッシュできます。私は $(document) をあまり使用しませんが、jsperf ( http://jsperf.com/document-vs-cache ) で行ったテストに基づいて、$(document) をキャッシュするとパフォーマンスも少し向上します。

  3. はい、$(this) をキャッシュできます。しかし、これは他のキャッシュとは異なります。ご存知のとおり、 $(this) の値は状況に応じて変化します。たとえば、このようにマウスリスナーで $(this) を使用すると....

    $(".button").on("click",function(){
   var $this = $(this);
});

    $(this) はユーザーがクラス "button" のボタンをクリックすると変化し、$("this") はユーザーがクリックしたオブジェクトになります。

    関数内で $(this) を頻繁に使用する場合、$(this) をキャッシュするとパフォーマンスが向上します。ただし、関数内で $(this) をキャッシュすると、キャッシュはグローバルではなくローカル変数になり、関数の最後で破棄されることに注意してください。したがって、関数の外では使用できません。

于 2014-07-21T22:06:48.613 に答える