jQuery パフォーマンスの最適化に関する 38 の提案_jquery

1. jQuery 変数定義時の var キーワードの追加に注意
これは jQuery に限らず、JavaScript 開発プロセス全体で注意が必要ですので、定義しないでください。
$loading = $('#loading'); //これはグローバル定義です。誤って同じ変数名をどこかで参照すると、死ぬほど落ち込むことになります。
2. var を使用して変数を定義します
複数の変数を使用する場合は、次のように定義してください:

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

var page = 0,
$loading = $('#loading'),
$body = $('body');

重度の強迫性障害がある場合を除き、すべての変数 A var キーワードに追加しないでください
3. $ 記号を追加して jQuery 変数を定義します
変数を宣言または定義するときは、次の点に注意してください。 jQuery 変数を定義している場合は、次のように変数の前に $ 記号を追加してください:

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

var $loading = $('#loading');

このように定義する利点は、コードを読んだ自分や他のユーザーに効果的に思い出させることができることです。これが jQuery 変数であることを示します。
4. DOM を操作するときはキャッシュを覚えておいてください
jQuery コード開発では、DOM 操作は非常にリソースを消費するプロセスであることが多く、多くの人が好んで使用します。 jQuery は次のようになります:

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

$('# loading' ).html('Complete');
$('#loading').fadeOut();

コード自体は問題なく実行でき、結果も得られます。ただし、$('#loading') を呼び出すときは常に注意してください。新しい変数を再利用する必要がある場合は、変数の内容を効果的に使用できるように、変数内で定義することを忘れないでください。

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

var $loading = $(' #loading');
$loading.html('Finished');$loading.fadeOut();

これにより、パフォーマンスが向上します。
5. チェーン操作を使用します
上記の例をより簡潔に書くことができます:

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

var $loading = $('#loading');
$loading.html('Complete').fadeOut();

6. jQuery コードの合理化
いくつかのコードを統合してみます。

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

//! ！悪役
$button.click(function(){
$target.css('width','50%');
$target.css('border','1px Solid #202020' ) ;
$target.css('color','#fff');
});

は次のように記述する必要があります:

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

$button.click(function(){

$target.css({'width':'50% ','border ':'1px Solid #202020','color':'#fff'});
});

7. グローバル型セレクターの使用を避ける
次のようには書かないでください: $('.something > *');次のように書くことをお勧めします: $('.something').children();

8.複数のIDを重複させないでください
次のような記述はしないでください: $('#something #children');これだけで十分です: $('#children');

9より論理的な判断を使用します || または && を使用して高速化します。

コードをコピーしてください コードは次のとおりです: if(!$something) {

$something = $('#something ');

}

書き込みパフォーマンスは

コードをコピー コードは次のとおりです。$something= $something|| ('#何か');
10. コードの使用量を減らしてください。
次のように記述する代わりに、if(string.length > 0){..}
のように記述します。 length) {..}
11. .on メソッドを使用してみる
新しいバージョンの jQuery クラス ライブラリを使用する場合は、他のメソッドは最終的に .on を使用してください。を達成するために。
12. jQuery の最新バージョンを使用してみる
jQuery の最新バージョンはパフォーマンスが優れていますが、最新バージョンは ie6/7/8 をサポートしていない可能性があるため、調整する必要があります。実際の状況に応じて状況を選択します。
13. ネイティブ JavaScript を使ってみる
jQuery が提供する機能がネイティブ JavaScript でも実装できる場合は、ネイティブ JavaScript を使用して実現することをお勧めします。
14. 常に #id セレクターから継承
これは jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。

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

$('#content').hide();

または、ID セレクターから継承して複数の要素を選択します。

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

$('#content p').hide();

15. クラスの前にタグを使用します
jQuery で 2 番目に速いセレクターは、タグ セレクター ($('head') など)。ネイティブ Javascript メソッド getElementByTagName() から直接取得されるためです。したがって、クラスを変更するには常にタグを使用することをお勧めします (最も近い ID を忘れないでください)

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

var acceptNewsletter = $('#nslForm input.on');

jQuery のクラス セレクターは、IE ブラウザーですべての DOM ノードを走査するため、最も遅くなります。クラスセレクターの使用は避けてください。 ID の変更にもタグを使用しないでください。次の例では、すべての div 要素を走査して、ID が「content」のノードを見つけます。

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

var content = $('div#content'); // 非常に遅いので、使用しないでください。

ID を使用して ID を変更するのは不要です:

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

var Traffic_light = $('#content #traffic_light') // 非常に遅いです、ドン。

を使用しないでください。16. サブクエリ
を使用して、将来の使用のために親オブジェクトをキャッシュします

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

var header = $('#header');
var menu = header.find('.menu');
// または
var menu = $('.menu', header);

17. Sizzle の「右から左」モデルに適用可能なセレクター
バージョン 1.3 以降、jQuery は Sizzle ライブラリを使用します。これは、セレクター エンジンでの動作方法が以前のバージョンとは大きく異なります。これは、「右から左」モデルを「左から右」モデルに置き換えます。右端のセレクターが限定的で、左端のセレクターが広範囲であることを確認してください:

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

var linkContacts = $('.contact-links div.side-wrapper');

を使用する代わりに

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

var linkContacts = $('a.contact-links .side-wrapper');

18. find( ) を使用します。確かに、コンテキストを使用せずに
.find() 関数を検索する方が高速です。ただし、ページに多くの DOM ノードがある場合は、前後の検索にさらに時間がかかることがあります。

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

var divs = $('.testdiv', '#pageBody'); // Firebug 3.6 の 2353
var divs = $('#pageBody').find('.testdiv') ); // Firebug 3.6 では 2324 - 最高の時間
var divs = $('#pageBody .testdiv'); // Firebug 3.6 では 2469

19. 独自のセレクターを作成します
コードでセレクターを頻繁に使用する場合は、jQuery の $.expr[':'] オブジェクトを拡張して独自のセレクターを作成します。次の例では、非表示の要素を選択するためにアバブザフォールドセレクターを作成しました:

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

$.extend($.expr[':'], {
Abovethefold: function(el) {
return $(el).offset().top }
});
var nonVisibleElements = $('div:abovethefold') // 要素

20 を選択します。 jQuery オブジェクトをキャッシュする
頻繁に使用する要素をキャッシュします:

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

var header = $('#header');
var divs = header.find('div');
var Forms = header.find('form') ;

DOM の挿入が必要な場合は、すべての要素を 1 つの要素にカプセル化します

21. 直接の DOM 操作は非常に遅いです。 HTML 構造の変更は最小限に抑えます。

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

var menu = '';
for (var i = 1; i menu = '

' i '

';
}
menu = '';
$('#header').prepend(menu);
// これは絶対に行わないでください:
$('#header') .prepend('

');
for (var i = 1; i $('#menu') .append('

' i '

');

}
22. jQuery は例外をスローしませんが、開発者はオブジェクトも検査する必要があります

jQuery はユーザーに大量の例外をスローしませんが、開発者はこれに依存すべきではありません。 jQuery は通常、オブジェクトが存在するかどうかを判断する前に、無駄な関数を多数実行します。したがって、オブジェクトへの一連の参照を行う前に、まずそのオブジェクトが存在するかどうかを確認する必要があります。
23. 同等の関数の代わりに直接関数を使用する
パフォーマンスを向上させるには、$.get()、$ の代わりに $.ajax() などの直接関数を使用する必要があります。 getJSON()、$.post()、後者は $.ajax() を呼び出すためです。
24. 後で使用するために jQuery の結果をキャッシュする
多くの場合、javasript アプリケーション オブジェクトを取得します。App を使用して、頻繁に使用するオブジェクトを保存できます。使用方法:

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

App.hiddenDivs = $('div.hidden ');
// 次に、アプリケーションを呼び出します:
App.hiddenDivs.find('span');

25. jQuery の内部関数 data( ) を使用して状態を保存します
情報を保存するには .data() 関数を使用することを忘れないでください:

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

$('#head').data('name', 'value');
// 次に、アプリケーションでそれを呼び出します:
$('# head')。 data('name');

26. jQuery ユーティリティ関数を使用する
シンプルで実用的な jQuery ユーティリティ関数を忘れないでください。私のお気に入りは $.isFunction()、$isArray()、$.each() です。
27. HTML ブロックにクラス "JS" を追加します
jQuery が読み込まれたら、まず HTML に "JS" というクラスを追加します

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

$('HTML').addClass('JS');

ユーザーの場合のみ CSS スタイルを追加できるのは、JavaScript が有効になっている場合のみです。例:

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

/* in css*/
.JS # myDiv{display:none;}

JavaScript が有効になっている場合は、HTML コンテンツ全体を非表示にし、jQuery を使用して目的のことを実現できます (たとえば、ユーザーがパネルをクリックしたときに特定のパネルを折りたたんだり展開したりするなど)。 Javascript が有効になっていない場合、ブラウザはすべてのコンテンツをレンダリングし、検索エンジン クローラーもすべてのコンテンツを削除します。今後はこのテクニックをもっと活用していきたいと思います。
28. $(window).load を優先します
場合によっては、$(document).ready() よりも $(window).load() の方が高速であるため、後者はすべての DOM 要素の前に実行されます。ダウンロードされています。使用する前にテストする必要があります。
29. イベント委任を使用する
コンテナ内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーション シナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲット ノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。まずテーブルを取得し、次にすべての td ノードの委任イベントを設定します:

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

$ ("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

30.ready イベントの略語を使用します
js プラグインを圧縮してすべてのバイトを保存したい場合は、$(document).onready()

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

//

$(document).ready(function ( ){
// コード
});
// 次のように省略できます:
$(function (){
// コード
});

31. jQuery 単体テスト
JavaScript コードをテストする最良の方法は、人にテストしてもらうことです。ただし、Selenium、Funcunit、QUIT、QMock などの自動化ツールを使用して、コード (特にプラグイン) をテストできます。この件については言いたいことがたくさんあるので別のトピックで取り上げたいと思います。
ThreeTwelve. jQuery コードを標準化する
コードを頻繁に標準化して、どのクエリが遅いかを確認し、置き換えます。 Firebug コンソールを使用できます。 jQuery のショートカット関数を使用してテストを容易にすることもできます:

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

// Firebug コンソールにデータを記録するためのショートカット
$.l($('div'));
// UNIX タイムスタンプを取得します

$.time();

// Firebug でコードの実行時間を記録します

$.lt();
$('div');
$.lt();

// コード ブロックを for ループに入れて実行時間をテストします

$.bm("var divs = $('.testdiv', '#pageBody');" // Firebug の 2353 3.6

33. HMTL5 を使用する
新しい HTML5 標準は、より軽量な DOM 構造をもたらします。構造が軽いということは、jQuery を使用するときに必要なトラバーサルが少なくなり、読み込みパフォーマンスが向上することを意味します。したがって、可能であれば HTML5 を使用してください。
34. 15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM 要素に直接追加します。
いくつかの要素にスタイルを追加するには、jQuey CSS を使用するのが最善の方法です。 （） 関数。ただし、15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM に直接追加する方が効率的です。この方法では、コード内でのハードコードの使用を回避します。

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

$('')
.appendTo('head');

35. 冗長なコードのロードを避ける
JavaScript コードを別のファイルに配置し、必要な場合にのみロードすることをお勧めします。こうすることで、不要なコードやセレクターをロードしなくなります。コードの管理も簡単です。
36. 1 つのメイン JS ファイルに圧縮し、ダウンロード数を最小限に抑えます。
どのファイルをロードするかを決定したら、それらを 1 つのファイルにパッケージ化します。 Minify (バックエンド コードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンライン ツールを使用してファイルを圧縮するなど、いくつかのオープン ソース ツールを使用してファイルを自動的に圧縮します。私のお気に入りは JSCompressor です。
37. 必要に応じてネイティブ Javascript を使用する
jQuery を使用することは素晴らしいことですが、JavaScript のフレームワークでもあることを忘れないでください。そのため、jQuery コードで必要に応じてネイティブ Javascript 関数を使用でき、パフォーマンスを向上させることができます。
38. 速度と SEO の利点のためのコンテンツの遅延読み込みは、読み込み速度を向上させるだけでなく、SEO の最適化も向上します (速度と SEO の利点のためのコンテンツの遅延読み込み)
Web サイトの読み込みに Ajax を使用します、これによりサーバー側の読み込み時間を節約できます。一般的なサイドバー ウィジェットから始めることができます。