Jquery を最適化し、Web ページの読み込み速度を向上させる_jquery

常に ID セレクターから継承
クラスの前にタグを使用
jquery オブジェクトをキャッシュ
強力なチェーン操作をマスター
サブクエリを使用
直接 DOM 操作の場合 制限
バブリング
排除無効なクエリ
$(window).load に遅延
js を圧縮
jquery ライブラリを完全に習得

1. 常に ID セレクター

から継承します。

jquery で最も速いセレクターは ID セレクターです。これは Javascript の getElementById() メソッドから直接取得されるためです。

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

• 赤


• 黄

< li> Green

このようにボタンを選択します非効率的です:

var Traffic_button = $('#content .button');
ID:

のボタンを直接選択する方が効率的です。

var Traffic_button = $('#traffic_button');

複数の要素を選択

複数要素の選択についての言及は、実際には DOM のトラバーサルとループに関するものであり、パフォーマンスを向上させるには、最も近い ID から継承するのが最善です。

var Traffic_lights = $('#traffic_light input');

2. クラスの前にタグ

を使用します

2 番目に速いセレクターはタグ セレクター ($('head')) です。これはネイティブの getElementsByTagName() メソッドからのものであるためです。

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

信号機

• 赤


• 黄色< /li>
  
• 緑色

;

常にタグ名を使用してクラスを制限 (変更) します (最も近い ID を忘れないでください):

var active_light = $('#traffic_light input.on');

注: クラスは jquery で最も遅いセレクターであり、IE ブラウザーでは、使用される場所に関係なくすべての DOM ノードを走査します。

タグ名で ID を変更しないでください。次の例では、すべての div 要素を走査して、ID が「content」のノードを検索します。

var content = $('div#content'); ID による ID の変更は不要です:

var Traffic_light = $('#content #traffic_light');

3. jquery オブジェクトをキャッシュする

jquery オブジェクトを変数にキャッシュする習慣を身につけます。

これは絶対に行わないでください:

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

$ ('# Traffic_light input.on).bind('click', function(){…});
$('#traffic_light input.on).css('border', '3px 破線の黄色');
$ ('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow'); >
まずオブジェクトを変数にキャッシュしてから操作するのが最善です:

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

var $active_light = $('#traffic_light input.on');

$active_light.bind('click', function(){…});
$ active_light.css('border', ' 3 ピクセルの破線の黄色');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

ローカル変数が jquery のパッケージであることを忘れないように、通常は変数の接頭辞として $ を使用します。コード内に同じセレクターを複数回出現させないでください。

後で使用できるように jquery 結果をキャッシュします
プログラムの他の部分で jquery 結果オブジェクトを使用する予定がある場合、または関数が複数回実行される場合は、それらをグローバル変数にキャッシュします。

jquery の結果を保存するグローバル コンテナを定義します。他の関数で参照できます:

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

// グローバル スコープでオブジェクトを定義します (例: window オブジェクト)
window.$my =
{
// 可能性のあるすべてのクエリを初期化します。複数回使用される
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};
function do_something()
{
// 保存された結果を参照して操作できるようになりました
var script = document.createElement('script');
$my.head.append(script) ;
/ / 関数内で操作する場合、クエリをグローバル オブジェクトに引き続き保存できます。
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td');
// グローバル関数を通常の jquery オブジェクトとして使用します。
$my.other_results.css('border-color', 'red');
$my .traffic_light.css('border-color', 'green');
}

4. 強力なチェーン操作をマスターする

上記の例は次のように書くこともできます:

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

var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){…})
.css('border', '黄色の 3 ピクセルの破線')
. css('background-color', 'orange')
.fadeIn('slow');

これにより、記述するコードが減り、より多くの JS を作成できるようになります。軽量。

5. サブクエリ

を使用します。

jQuery を使用すると、ラップされたオブジェクトに対して追加のセレクター操作を使用できるようになります。親オブジェクトを変数に保存したため、その子要素に対する操作が大幅に改善されました:

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

信号機

• 赤


• 黄色


• 緑色

< /ul>

たとえば、サブクエリ メソッドを使用してオンまたはオフのライトをキャプチャし、後続の操作のためにキャッシュすることができます。

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

var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find( 'input. on'),
$inactive_lights = $traffic_light.find('input.off');

ヒント: カンマ区切りのメソッドを使用して一度に複数のローカル変数を宣言できます – バイト数の節約

6. 直接 DOM 操作を制限する

ここでの基本的な考え方は、実際に必要なものをメモリ内に構築してから DOM を更新することです。これは実際には jQuery のベスト プラクティスではありませんが、有効な JavaScript の直接操作には必要です。

たとえば、リスト要素のセットを動的に作成したい場合は、次のことは絶対に行わないでください:

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

var top_100_list = [...], // ここに 100 個の一意の文字列があると仮定します。
$mylist = $('#mylist') // jQuery selects < ; ul> 要素
for (var i=0, l=top_100_list.length; i{
$mylist.append('

' top_100_list[i] '< ; /li>');
}


DOM に要素文字列を挿入する前に、要素文字列のセット全体を作成する必要があります:

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

var top_100_list = [...],
$mylist = $('#mylist'),
top_100_li = ""; // この変数は次の目的で使用されます。リスト Element
for (var i=0, l=top_100_list.length; i{

}
$mylist.html(top_100_li);

挿入する前に複数の要素を単一の親ノードにラップすると高速になります:

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

var top_100_list = [...],
$mylist = $(' #mylist'),
top_100_ul = '

';
for (var i=0, l=top_100_list.length; i{
top_100_ul = '
• '
';
}
top_100_ul = '

'; //順序なしリストを閉じる
$ mylist.replaceWith(top_100_ul);

上記の作業を行ってもパフォーマンスの問題がまだ心配な場合は、次のことを行ってください。

jquery の clone() メソッドを試してみると、ノード ツリーのコピーが作成され、「オフライン」方法で DOM 操作を実行できるようになり、操作が完了したらノード ツリーに戻すことができます。

DOM DocumentFragments を使用します。jQuery の作成者が述べたように、そのパフォーマンスは直接 dom 操作よりも大幅に優れています。

7. バブリング

特別な状況を除いて、すべての JS イベント (クリック、マウスオーバーなど) は親ノードにバブルアップします。これは、複数の要素で同じ関数を呼び出す必要がある場合に便利です。

この非効率的な複数要素のイベント リスニングの代わりに、親ノードに 1 回バインドするだけで、どのノードがイベントをトリガーしたかを計算できるようになります。

たとえば、この動作を多くの入力ボックスのあるフォームにバインドしたいとします。選択された入力ボックスにクラスを追加します

このようなイベントのバインドは非効率です:

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

$('#entryform input).bind('focus', function(){
$(this).addClass('selected');
}).bind('blur', function(){
$(this).removeClass('selected');
});

親レベルでフォーカスの取得と喪失のイベントをリッスンする必要があります。 >

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

$('#entryform').bind(' focus', function(e) {

var cell = $(e.target) // e.target はイベントをトリガーしたノードを取得します。
cell.addClass('selected');
} ).bind('blur' , function(e){
var cell = $(e.target);
cell.removeClass('selected');
});


親要素はディスパッチャーの役割を果たし、ターゲット要素に基づいてイベントをバインドできます。同じイベント リスナーを多くの要素にバインドしていることが判明した場合は、何か間違ったことをしたはずです。

8. 無効なクエリを削除します

jquery は一致する要素がない状況を非常にエレガントに処理できますが、サイト全体に 1 つのグローバル js しかない場合、すべての jquery 関数が $( に詰め込まれる可能性が非常に高くなります。 document)ready (function(){//あなたが誇るすべてのコード}).

ページ内で使用される関数のみを実行します。最も効果的な方法は、テンプレートが js をいつどこで実行するかを正確に制御できるように、インライン初期化関数を使用することです。

たとえば、「記事」ページ テンプレートでは、本文の最後に次のコードを引用できます。

グローバル js ライブラリは次のようになります:

var mylib =

{
article_page :
{
init : function()
{
// 記事固有の jQuery 関数。
}
} ,
Traffic_light :
{
init : function()
{
// 信号機の独自の jQuery 関数。
}
}
}

9. $(window).load に従う

Jquery には、開発者にとって非常に魅力的な機能があり、$(document).ready の下に何でもぶら下げてイベントのふりをすることができます。

$(document).radiy は確かに非常に便利ですが、他の要素がダウンロードされる前にページがレンダリングされるときに実行される可能性があります。ページが常に読み込まれている場合、それはおそらく $( document).ready です。関数。

jquery 関数を $(window).load イベントにバインドすることで、ページの読み込み時の CPU 使用率を削減できます。この関数は、すべての HTML (