Jqueryパフォーマンス最適化_jqueryの詳しい説明-jsチュートリアル-php.cn

Jqueryパフォーマンス最適化_jqueryの詳しい説明

WBOY

リリース： 2016-05-16 16:48:02

オリジナル

1170 人が閲覧しました

検索を繰り返した結果、最終的に jquery のパフォーマンスの最適化に関する記事をいくつか見つけました。編集者がそれらをまとめてくれました。もちろん、私自身の要約と理解をいくつか追加することも忘れませんでした。

まず、前の記事の jquery チェーン操作は jquery のパフォーマンス最適化手法の 1 つであり、具体的な実装と利点についてはここでは繰り返しません。次に、jquery の最適化は Web 最適化のいくつかの方法と同じです。

a. js を圧縮します。コード圧縮テクノロジーを使用してファイルサイズを削減します。 (jsmin、YUI Compressor などを使用)。

b. デフォルトでは、子ノードで発生したイベントは親ノードで処理できます。イベント登録は親ノードに置くため、子ノードごとにイベントリスナーを登録する必要はありません。

c. キャッシュを使用すると、jquery オブジェクトを複数回使用する場合、jquery オブジェクトを変数にキャッシュできます。

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

var nodeTd = $("table td" );
var $cj = $("#cj");

$cj.on("click",function(){
$cj.css("color","blue");})

jquery 結果キャッシュ。プログラム内の別の場所で jquery 結果オブジェクトを使用する必要がある場合、または関数が複数回実行される場合は、それを変数に保存できます。

d. ID セレクターからの継承を試みます。 ID は一意であるため、ID の選択は、jquery で要素を選択する最も速い方法です。

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

$("#firstd").slideDown (500) ;
$("#firstd img").slideUp(500);//ID セレクターの継承を使用して複数の要素を選択します

e. サブクエリを使用する

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

 zhuye.on("swipright"," #data li ",function(){
 
f. コンテキスト検索を使用しない find() を使用します。 .find() 関数は上記の e で使用されています。

g. jquery の内部関数 data() を使用して状態を保存します (このパフォーマンス最適化方法は Baidu で最初に見られたため、当面は彼の例を直接引用しましょう)。

コードをコピーコードは次のとおりです:$('#head').data ('name ', 'value');

// 次に、アプリケーションで呼び出します:

$('#head').data('name');

h. 最後に、新しいバージョンの jQuery を使用して、jquery コードを簡素化します。

コードをコピーコードは次のとおりです。$(document).ready(function ( ){

});

$(function (){
});