jqueryのパフォーマンスを改善するためのベストプラクティスの概要_jquery

for ループで jquery オブジェクトをキャッシュします。次に示すように、配列の length プロパティに毎回アクセスする代わりに、まずオブジェクトを変数にキャッシュしてから操作する必要があります。

コードをコピーします コードは次のとおりです。

var myLength = myArray.length; >for ( var i = 0; i < myLength; i ) {
// 何をするか
}

append
< を外側で使用しますループ 🎜>DOM の操作には代償が伴います。多数の要素を DOM に追加する必要がある場合は、一度に 1 つずつではなく、一度にバッチで実行する必要があります。

コードをコピー コードは次のとおりです:

// これは行わないでください

$.each(reallyLongArray , function(count, item) {
var newLI = '

' item '

';
$('#ballers').append(newLI) ;
}) ;
//より良い方法
var frag = document.createDocumentFragment();
$.each(reallyLongArray, function(count, item) {
var newLI = '< ;li>' アイテム ''
frag.appendChild(newLI[0])
$('#ballers')[0].appendChild(frag) () で $('#id') セレクターを使用すると、DOM 要素を見つけるために何度も走査することになるため、document.createDocumentFragment() を使用して DOM の変更回数と更新回数を削減します。ページの構造

// または次のようになります。
var myHtml = '';
$.each(myArray, function(i, item) {
html = '

' アイテム '

' ;
$('#ballers').html(myHtml);

コードをコピー

コードは次のとおりです: // 理想的ではありませんif ( $ventfade.data('現在') != '表示中') { $ventfade.stop();

}

if ($ventfade.data('現在') != '表示中') {
$venthover.stop();
}
if ($spans.data('currently') != '表示中') {
$spans.stop();
// より良い
var elems = [$ventfade, $venthover, $spans];
$.each(elems, function(k, v) {
if (v.data('currently ') != '表示') {
v.stop();
}
})



匿名関数の使用には注意してください

匿名関数の制約はどこでも厄介です。デバッグ、保守、テスト、再利用が困難です。代わりに、オブジェクトのカプセル化を使用して、名前を付けてハンドラーとコールバック関数を編成および管理できます。

コードをコピー

コードは次のとおりです: // これは行わないでください$(ドキュメント).ready(function() {... $('#magic').click(function(e) { $('#yayEffects').slideUp(function() { ...

});

});
$('#happiness').load(url ' #ユニコーン', function() {...
})
} );

// より良い
var PI = {
onReady: function() {...
$('#magic').click(PI.candyMtn); >$(' #happiness').load(url ' #unicorns', PI.unicornCb);
},
candyMtn: function(e) {
$('#yayEffects').slideUp( PI.slideCb) ;
},
slideCb: function() {...
},
unicornCb: function() {...
}
}
$(document) .ready(PI.onReady);



最適化されたセレクター

指定された ID に基づいて要素を照合する場合、常に #id が使用されます要素を見つける

コードをコピー

コードは次のとおりです:

// 非常に高速です$('#container div.robotarm'); // 超高速 $('#container').find('div.robotarm'); $.fn.find メソッドを使用すると高速になります。最初の選択肢 セレクターはセレクター エンジンによって処理される必要はありません。jquery で最も高速なセレクターは、JavaScript の getElementById() メソッドから直接取得されるため、ブラウザーにネイティブであるため非常に高速です。複数の要素を選択する必要がある場合は、必然的に DOM のトラバーサルとループが発生し、パフォーマンスを向上させるために、最も近い ID から継承することをお勧めします。

セレクターの右側の部分はできるだけ具体的にする必要があるが、左側の部分はそれほど具体的である必要がないことを指定します。




コードをコピー

コードは次のとおりです:

// 最適化されていません$( 'div. data .gonzalez'); // 最適化後 $('.data td.gonzalez'); 可能であれば、セレクターの右側で tag.class を使用するようにしてください。または .class のみ。

あまり具体的になることは避けてください

コードをコピーします コードは次のとおりです:

$('.data table.attendees td.gonzalez');
// 真ん中のものは書かない方が良いでしょう
$('.data td.gonzalez');構造は選択の改善にも役立ちます。セレクターのパフォーマンスにより、セレクター エンジンがその要素を見つけるために実行するレイヤーの数を減らすことができます。

無向ワイルドカード セレクターの使用を避ける

コードをコピーコードは次のとおりです:

$('.buttons > *') // 非常に遅い
$('.buttons').children(); // 非常に高速です $('.gender :radio'); // 無向検索
$('.gender *:radio') // 上記と同じ
$('.gender input:radio');これは良いことです。 多くの

イベント委任を使用する
イベント委任を使用すると、イベント ハンドラーをコンテナ要素 (順序なしリストなど) にバインドすることができます。コンテナー内の各要素 (リスト項目など) をバインドする必要があります。 jQuery は $.fn.live と $.fn.delegate を提供します。可能であれば、$.fn.live の代わりに $.fn.delegate を使用してください。これにより、不要なセレクターの必要性がなくなり、明示的なケースのコンテキスト ($.fn.live のドキュメント コンテキスト) が 80% 削減されます。オーバーヘッド。イベント委任により、パフォーマンス上の利点に加えて、イベントが既に存在するため再バインドすることなく、コンテナに新しい要素を追加することもできます。


イベントの冗長性を減らすために、イベント委任を通じて複数のイベントを一度にバインドします

コードをコピー コードは次のとおりです。

// 悪い (リストに要素が多い場合)
$('li.trigger').click(handlerFn); > // より良い: $.fn.live
$('li.trigger').live('click', handlerFn) によるイベント委任

// 最適: $.fn .delegate
$('#myList').delegate('li.trigger', 'click', handlerFn);



要素の削除

DOM 操作が遅いそしてそれを操作しないようにする必要があります。 jQuery はバージョン 1.4 で $.fn.detach を導入し、DOM から一致する要素をすべて削除しました。

コードをコピー コードは次のとおりです。 var $table = $('#myTable ');

var $parent = table.parent();

$table.detach();
// ... テーブルに多数の行を追加します
$parent.append (table);


.detach() は、削除された要素に関連付けられたすべての jQuery データを保存する点を除いて、.remove() と同じです。このメソッドは、要素を削除して後で DOM に挿入する必要がある場合に便利です。

多数の要素の CSS を変更する場合は、スタイル シートを使用する必要があります。

$.fn.css を使用してその他の要素の CSS を変更している場合要素が 20 個を超える場合は、スタイル タグを一度に追加することを検討してください。これにより、速度が 60% 向上します。

コードをコピー コードは次のとおりです: // 20 を超えると明らかに遅い

$ ('a.swedberg').css('color', '#asd123');

$('