JQuery のパフォーマンスを向上させ、JQuery の実行を高速化する 10 の簡単な方法_jquery

次のように特定のバージョンをロードすることもできます:

コードをコピーします

JavaScript と CSS の圧縮の目的は、(元のファイルを減らすか、gzip を使用することによって) スクリプトの実行パフォーマンスを維持しながら、データ転送のバイト数を減らすことです。ほとんどの実稼働レベルのネットワーク サーバーは、HTTP の一部として gzip を使用します。プロトコル）。 jQuery が公式に推奨するスクリプトを圧縮するツールである YUI compressor から引用。
それぞれを
に置き換えます。ネイティブ関数は常にヘルパー コンポーネントよりも高速です。

//次の例では、リストとエントリの内容を入力します
//その後、各エントリが 1 回選択されます
//最初にクラス選択を使用します
console.time('class');
var list = $('#list') ;
var items = '
';
for (i=0; iitems = '
item
'; >items = '
';
list.html (items);
for (i=0; ivar s = $('.item' i);
}
console.timeEnd('class');
//ID を使用して
console.time('id');
var list = $('#list' );
var items = '
';
for (i=0; iitems = '
item
'; 🎜>items = '
';
list.html (items);
for (i=0; ivar s = $('#item' i) ;
}
console.timeEnd('id');


上記の例は、異なる選択方法間のパフォーマンスの大きな違いをうまく示しています。下の図を参照してください。クラスを使用して選択すると、時間が無限に増加し、5 秒を超えることもあります。
セレクターのコンテキストを指定する
jQuery リファレンス ドキュメントには次のように記載されています: 元の DOM ノードのコンテキストが jQuery() に渡されます (何も渡されない場合、コンテキストはドキュメント全体です)。目的は、セレクターと組み合わせてより正確なクエリを実現することです。

セレクターにコンテキストを追加することをお勧めします (式: ターゲット セレクター; コンテキスト: コンテキスト):

つまり、

これは DOM 全体を走査する必要がないため、はるかに高速です。 #class-container を見つけてください。
キャッシュを構築します
同じものを常に再選択するという間違いを犯さないでください。処理したい要素を変数としてキャッシュする必要があります。

// こう書いた方が良いです
$('#item').css('color', '#123456').html('hello').css('background- color', '# ffffff');
// こんな感じでも
var item = $('#item');
item.css('color', '#123456'); >item.html(' hello');
item.css('background-color', '#ffffff');
// これはループに遭遇すると非常に悪いです
console.time('キャッシュがありません');
for (var i=0; i$('#list').append(i);
console.timeEnd('キャッシュなし');
// 以下の方がはるかに優れています
console.time('cache');
for (var i=0) ; iitem.append(i);
console.timeEnd('cache');
Avoid DOM operations
DOM operations should be as few as possible, because insertion actions such as prepend(), append(), and after() are time-consuming. The above example would be faster if you use html():

Avoid using concat() and use join() to process long strings
It may sound strange, but doing this can really improve the speed. Especially when concatenating particularly long strings. First create an array and put the things you want to concatenate. The join() method is much faster than the string concat() function.

" = operator is faster - faster than putting string fragments into an array and then joining them together", "array as string buffer More efficient than the string.prototype.concat.apply method in most browsers, with the exception of Firefox 2.0.0.14 on Windows. ” — Tom Trenka
Returns false value
You may have noticed that if the function If it does not return false after execution, you will be jumped to the top of the page. This reaction is very annoying if the page is long.
So, instead of:

How about adding one more sentence:

Extra Tips – Cheat Sheets and Reference Documents

This suggestion does not directly improve the execution speed of the function, but if you are willing Taking the time to do this, studying these cheat sheets and reference documents, will save you a lot of time in the future.
Keep a cheat sheet handy at all times for quick reference.