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

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

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

var myLength = myArray.length; >for ( var i = 0; 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');

$('

コードをコピー コードは次のとおりです: // よく使用される

$( elem).data (key, value);

// 10 倍高速




空白の選択で時間を無駄にします 結果は次のようになります。

jQuery は、実行したいコードが空の選択にあるかどうかを通知せず、何も問題がないかのように実行を続けます。パフォーマンスに影響を与えます。


コードをコピー

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

//これはひどいです。3 つのメソッドを実行した後、それが空であることに気づきました。
$('#nouchthing').slideUp();

// より良い
var $mySelection = $('#nouchthing');
if ($mySelection.length) {
mySelection.slideUp();
}

// ベスト: doOnce プラグインを追加します
jQuery.fn.doOnce = function(func) {
this.length && func.apply(this);
return this;
}
$('li.cartitems').doOnce (function() {
// make it ajax! o/
}); この保護層は、操作される要素が空であってもオーバーヘッドが非常に高いため、jQuery UI ウィジェットに適しています。

変数の定義
変数は複数の宣言ではなく 1 つの宣言で定義できます

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

// 古いスタイルの書き方
var test = 1;
var test2 = function() {...
};
var test3 = test2(test);

// 新しい
var test = 1,
test2 = function() {...
},
test3 = test2(test); 自動実行される関数では、変数の定義を完全に省略できます。 (function(foo, bar) {...
})(1, 2);

条件判定

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

// 古いメソッド
if (type == 'foo' || type == 'bar') {...
}

// 良いメソッド
if (/^(foo|bar)$/.test(type)) {...
}

// オブジェクトを検索
if (({
foo: 1,
bar: 1
})[type]) {...
}

著者: Zeng Xiangzhan
出典: 終わりなき学習 (http://www.cnblogs.com/zengxiangzhan/)