jQuery パフォーマンス最適化マニュアル 推奨_jquery

Twitter でこの記事 <jQuery パフォーマンス ルール> を見つけて簡単に翻訳しました:

常に ID セレクターから継承
クラス タグの前に使用
キャッシュ jquery オブジェクト
強力なチェーン操作をマスター
サブクエリを使用
直接の DOM 操作を制限
バブル
無効なクエリを削除
$(window).load まで遅延
js を圧縮
包括的な習得jquery ライブラリの
1. 常に ID セレクターから継承します。jquery で最も高速なセレクターは、JavaScript からの getElementById() メソッドです。 >
コードをコピー

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

信号機

• 赤


• gt; 黄色


• 緑色

;


このようなボタンの選択は非効率です:



コードをコピー

コードは次のとおりです。 🎜> var Traffic_button = $('#content .button'); ID ボタンを使用して直接選択する方が効率的です:

コードをコピーします

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

var Traffic_button = $('# Traffic_button'); 複数の要素を選択する

複数の要素を選択するということは、実際には比較的遅い DOM トラバーサルとループについて話しているため、最も近い ID から継承を開始するのが最善です。

コードをコピー


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

var Traffic_lights = $ ('#traffic_light input'); 2. クラス の前にタグを使用します。同様に、ネイティブの getElementsByTagName() メソッドから取得されるため、2 番目に高速なセレクターはタグ セレクター ($('head')) です。 >

コードをコピーします

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

🎜>

交通信号

/li>

Yellow

グリーン

form>

常にタグ名でクラスを制限 (変更):




コードをコピーします


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

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 オブジェクトを変数にキャッシュする習慣を身につけるため。
これは絶対に行わないでください:

コードをコピーします コードは次のとおりです: $ ('#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', '3px 破線黄色'); $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'); = $('#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', '3px 破線黄色')

.css(' background-color', 'orange') .fadeIn ('slow'); これにより、記述するコードが減り、JS がより軽量になります。サブクエリの使用jQuery では、ラップされたオブジェクトに対して追加のセレクター操作を使用できます。これにより、親オブジェクトが変数に保存されているため、その子要素に対する操作が大幅に改善されます。 >

コードをコピーします


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

信号機

• 赤


• ;

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

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

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

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

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

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

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

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

var top_100_list = [...], // ここに 100 個の一意の文字列があると仮定します。
$mylist = $('#mylist'); // jQuery

要素への選択 (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 = ""; // この変数は (var i=0, l=top_100_list.length; i{
top_100_li = '< ;li>

を挿入する前に、複数の要素を 1 つにラップします。親ノードが高速になります:

コードをコピーします コードは次のとおりです: var top_100_list = [. ..],

$mylist = $('#mylist'),

top_100_ul = '

';for (var i=0, l=top_100_list .length; i{
top_100_ul = '
• ' top_100_list[i] '
  }
  top_100_ul> ;'; // 順序なしリストを閉じます
  $mylist.replaceWith(top_100_ul);
  
  
  上記の作業を行ってもパフォーマンスの問題がまだ心配な場合は、次のようにします。
  jquery の clone() メソッドを試してください。ノード ツリーのコピーが作成され、これにより DOM 操作を「オフライン」で実行できるようになり、操作が完了したらノード ツリーに戻すことができます。

DOM DocumentFragments

を使用すると、jQuery の作成者が述べているように、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' );

});
親要素は、ターゲット要素に基づいてイベントをバインドできるディスパッチャーの役割を果たします。同じイベント リスナーを多くの要素にバインドしていることが判明した場合は、何か間違ったことをしたはずです。 .無効なクエリを削除します
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).rady ですが、これは確かにそうです。ページのレンダリング時に他の要素がダウンロードされる前に実行できます。ページが常に読み込まれている場合は、$(document).ready 関数が原因である可能性が高くなります。 jquery 関数を $(window).load イベントにバインドすることで、ページの読み込み時の CPU 使用率を削減できます。



コードをコピー


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

$(window).load(function() { // jQuery });

ドラッグ アンド ドロップ、視覚効果やアニメーション、隠し画像のプリロードなどの追加機能はすべて、

10. js を圧縮する

js オンライン圧縮アドレスを推奨します:
http://dean.edwards.name/packer/

http://www. jb51.net/tools/packer.htm
11. jQuery ライブラリを包括的にマスターする

自分と敵を知り、jQuery をより深く理解することでのみ、すべての戦いに勝つことができます。これは、jQuery のクイック リファレンス マニュアルです。印刷して持ち歩くことができます。
のテキスト:

。 jQuery パフォーマンス ルール

; 翻訳元:

Rlog.cn
転載する場合は出典を明記してください

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。