jQuery のパフォーマンスを最適化するために学ぶべき 28 の提案_jquery

jQuery パフォーマンスの最適化に関する 28 の提案 私は肥大化した動的 Web アプリケーションを軽量化するために、jQuery のパフォーマンス最適化に関するヒントを探してきました。多くの記事を検索した結果、パフォーマンスを最適化するために最も一般的に使用される最良の提案をいくつかリストすることにしました。また、印刷したりデスクトップの背景として設定できる、jQuery のパフォーマンスに最適化された簡潔なスタイルシートも作成しました。
1. セレクターのパフォーマンス最適化に関する提案
1. 常に #id セレクターから継承します
これは、jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。

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

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

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

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

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

2. クラス
の前にタグを使用します。 jQuery のセレクターは、ネイティブ Javascript メソッド getElementByTagName() から直接取得されるため、タグ セレクター ($('head') など) です。したがって、クラスを変更するには常にタグを使用することをお勧めします (最も近い 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' ); // 非常に遅いため、

を使用しないでください。 3. 将来の使用のために親オブジェクトをキャッシュするために

を使用します。 code コードは次のとおりです:

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

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

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

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

の代わりに

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

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

5. コンテキスト検索の代わりに 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

6. jQuery のチェーン操作を使用した型操作
は、セレクターをキャッシュするより効率的です:

コードをコピー

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

$('li.menu-item').click(function () {alert('テストクリック');})
.css('display', 'block')
.css('color', 'red')
fadeTo(2, 0.7);

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

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

$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $ (ウィンドウ) .scrollTop() $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 要素を選択します

2. DOM 操作を最適化するための提案 8. jQuery オブジェクトをキャッシュする
頻繁に使用する要素をキャッシュします:

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

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


9. DOM 挿入を実行する場合、すべての要素を 1 つの要素にカプセル化します

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

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

var menu = '

';
for (var i = 1; i <100; i ) {
メニュー = '
' i '
'; 🎜>menu = '

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

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

' i '

');
}


10. jQuery は例外をスローしませんが、
例外の数はユーザーにスローされませんが、開発者はこれに依存しないでください。 jQuery は通常、オブジェクトが存在するかどうかを判断する前に、無駄な関数を多数実行します。したがって、オブジェクトへの一連の参照を行う前に、まずそのオブジェクトが存在するかどうかを確認する必要があります。
11. 同等の関数の代わりに直接関数を使用する

パフォーマンスを向上させるには、$.get()、$ .getJSON()、$.post() の代わりに $.ajax() のような直接関数を使用する必要があります。後者は $.ajax() を呼び出すためです。
12. 後で使用するために jQuery の結果をキャッシュする
多くの場合、JavaScript アプリケーション オブジェクトを取得します。App を使用して、頻繁に選択するオブジェクトを保存できます。




コードをコピーします

コードは次のとおりです: App.hiddenDivs = $('div.hidden'); // 次に呼び出します。

App.hiddenDivs.find('span');

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

コードをコピー

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

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

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

コピーコード

コードは次のとおりです: $('HTML').addClass('JS');

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

コードをコピー

コードは次のとおりです: /* in css*/ .JS #myDiv{display:none;}

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

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

$("テーブル").delegate("td", "hover", function(){
$(this).toggleClass("hover");
}); >

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

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

//
$(document).ready(function) は使用しません。 (){
// コード
});
$(function (){
// コード
}); >


4. jQuery のテスト

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

コードをコピーします コードは次のとおりです: // Firebug コンソールにデータを記録するためのショートカット

$.l($('div'))

Copy code コードは次のとおりです: // UNIX タイムスタンプを取得します

$.time();

コードをコピー コードは次のとおりです: // Firebug にコードの実行時間を記録します

$.lt () ;

$('div');




コードをコピーします>

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

// コード ブロックを for ループに入れて実行時間をテストします $.bm("var divs = $('.testdiv ', '#pageBody' );"); // Firebug 3.6 の 2353 5. その他の jQuery パフォーマンス最適化に関する一般的な提案

21. 最新バージョンのjQuery
最新バージョン 多くの場合、最高です。バージョンを変更した後は、必ずコードをテストしてください。完全な下位互換性がない場合もあります。
22. HMTL5 の使用
新しい HTML5 標準は、より軽量な DOM 構造をもたらします。構造が軽いということは、jQuery を使用するときに必要なトラバーサルが少なくなり、読み込みパフォーマンスが向上することを意味します。したがって、可能であれば HTML5 を使用してください。

23. 15 個を超える要素にスタイルを追加する場合は、スタイル タグを DOM 要素に直接追加します。
いくつかの要素にスタイルを追加するには、jQuey の css() 関数を使用するのが最善の方法です。ただし、15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM に直接追加する方が効率的です。この方法では、コード内でのハードコードの使用を回避します。


コードをコピー


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

$('') .appendTo('head');
24. Avoid loading redundant code
It is a good idea to put Javascript code in different files and load them only when needed. This way you won't load unnecessary code and selectors. It is also easy to manage code.
25. Compress into one main JS file to keep the number of downloads to a minimum
When you have determined which files should be loaded, package them into one file. Use some open source tools to automatically do it for you, such as using Minify (integrated with your back-end code) or using online tools such as JSCompressor, YUI Compressor or Dean Edwards JS packer to compress files for you. My favorite is JSCompressor.
26. Use native Javascript when needed
Using jQuery is a great thing, but don’t forget that it is also a framework for Javascript. So you can use native Javascript functions when necessary in jQuery code, which can achieve better performance.
27. Load jQuery framework from Google
When your application is officially launched, please load jQuery from Google CDN, because users can get the code from the nearest place. This way you can reduce server requests, and if the user browses another website that also uses Google CDN's jQuery, the browser will immediately call out the jQuery code from the cache.

Copy code The code is as follows:

// Link specific version of the compression code
< ;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">

28. Lazy load content for speed and SEO benefits (Lazy load content for speed and SEO benefits)
Use Ajax to load your website, which can save money on the server side Loading time. You can start with a common sidebar widget.