jQueryのパフォーマンスを最適化するにはどうすればよいですか?最適化手法のまとめ

jQuery のパフォーマンスを最適化するにはどうすればよいですか?次の記事ではjQueryの最適化方法をいくつか紹介しますので、ぜひ参考にしてください。

私は、肥大化した動的 Web アプリケーションを軽量化するために、jQuery パフォーマンスの最適化に関するヒントを探してきました。多くの記事を検索した結果、パフォーマンスを最適化するために最も一般的に使用される最良の提案をいくつかリストすることにしました。 [推奨学習:

jQuery ビデオ チュートリアル ]

1. セレクターのパフォーマンス最適化に関する提案

1. 常に#id セレクターから

を継承するこれは、jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。

2. クラスの前でタグを使用する

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

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

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

今後の使用に備えて親オブジェクトをキャッシュする

4. Sizzle 用にセレクターを最適化する-left" モデル

バージョン 1.3 以降、jQuery は Sizzle ライブラリを採用しています。これは、セレクター エンジンでの以前のバージョンの表現とは大きく異なります。これは、「右から左」モデルを「左から右」モデルに置き換えます。

5. コンテキスト検索の代わりに find() を使用する

find() 関数の方が実際には高速です。ただし、ページに多数の DOM ノードがある場合は、前後の検索にさらに時間がかかることがあります:

6. 強力なチェーン操作を使用する

jQuery を使用する チェーン操作は次のとおりです。セレクターをキャッシュするよりも効率的です

7. 独自のセレクターを作成します

コード内でセレクターを頻繁に使用する場合は、jQuery の $ .expr[':'] オブジェクトを拡張し、独自のセレクターを作成します。

2. DOM 操作を最適化するための提案

8. jQuery オブジェクトのキャッシュ

頻繁に使用される要素をキャッシュします。

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

ここでの基本的な考え方は、まさに必要なものを作成することです。そしてDOMを更新します。これは jQuery のベスト プラクティスではありませんが、有効な JavaScript 操作には必要です。直接 DOM 操作は非常に遅い 直接 DOM 操作は非常に遅い。 HTML 構造の変更は最小限に抑えます。

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

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

11. 同等の関数の代わりに直接関数を使用する

パフォーマンスを向上させるには、 .ajax() を使用せず、 . a j a x () などの直接関数を使用する必要があります。 、.ajax()、.get()、.g e t J S O N ( )、.getJSON()、.getJSON()、.post() は使用しないでください。次のいくつかは $.ajax() を呼び出すためです。

12. 後で使用するために jQuery の結果をキャッシュする

頻繁に javasript アプリケーション オブジェクトを取得します - App を使用して、頻繁に選択するオブジェクトを保存できます。将来の使用

13. jQuery の内部関数 data() を使用してステータスを保存します

.data() 関数を使用して情報を保存することを忘れないでください

14. jQuery ユーティリティ関数を使用する

シンプルで実用的な jQuery ユーティリティ関数を忘れないでください。私のお気に入りは、$.isFunction()、i s A r r a y ( )、isArray()、isArray()、および .each() です。

15. クラス "JS" を HTML ブロックに追加します

jQuery が読み込まれたら、まず "JS" というクラスを HTML ブロックに追加します $('HTML ').addClass('JS');ユーザーが JavaScript を有効にしている場合にのみ CSS スタイルを追加できます。

3. イベントのパフォーマンスを最適化するための提案

16. ( w i n d o w ) まで延期します。 l o a d

時々 (window).load が使用されます。時々 (window).load が使用されます。場合によっては、(window).load() は $(document).ready() よりも高速です。これは、後者がすべての DOM 要素を待機しないためです。すべてのダウンロードが完了する前に実行されます。使用する前にテストする必要があります。

17. イベント委任を使用する

コンテナ内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーション シナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲット ノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。

18.ready events の省略形を使用します

js プラグインを圧縮してすべてのバイトを保存したい場合は、$(document) の使用を避ける必要があります。 onready()

4. jQuery のテスト

19. jQuery 単体テスト

最高JavaScript コードをテストする方法 最良の方法は、人を使ってテストすることです。ただし、Selenium、Funcunit、QUIT、QMock などの自動化ツールを使用して、コード (特にプラグイン) をテストできます。この件については言いたいことがたくさんあるので別のトピックで取り上げたいと思います。

20. jQuery コードを標準化する

コードを頻繁に標準化し、どのクエリが遅いかを確認し、置き換えます。 Firebug コンソールを使用できます。 jQuery のショートカット関数を使用してテストを容易にすることもできます

##5. jQuery のパフォーマンス最適化に関するその他の一般的な提案##21. jQuery の最新バージョン多くの場合、最新バージョンが最適です。バージョンを変更した後は、必ずコードをテストしてください。完全な下位互換性がない場合もあります。

22. HMTL5 を使用する

新しい HTML5 標準により、DOM 構造が軽量化されています。構造が軽いということは、jQuery を使用するときに必要なトラバーサルが少なくなり、読み込みパフォーマンスが向上することを意味します。したがって、可能であれば HTML5 を使用してください。

23. 15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM 要素に直接追加します。

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

24. 冗長なコードのロードを避ける

JavaScript コードを別のファイルに配置し、必要な場合にのみロードすることをお勧めします。こうすることで、不要なコードやセレクターをロードしなくなります。コードの管理も簡単です。

25. メイン JS ファイルに圧縮し、ダウンロード数を最小限に抑えます

どのファイルをロードするかを決定したら、それらを圧縮します。ファイルに。これを自動的に行うには、Minify (バックエンド コードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンライン ツールを使用してファイルを圧縮するなど、いくつかのオープン ソース ツールを使用します。私のお気に入りは JSCompressor です。

26. 必要に応じてネイティブ Javascript を使用する

jQuery を使用することは素晴らしいことですが、それが Javascript のフレームワークでもあることを忘れないでください。そのため、必要に応じて jQuery コードでネイティブ Javascript 関数を使用でき、パフォーマンスを向上させることができます。

27. Google から jQuery フレームワークをロードします

アプリケーションが正式に起動されたら、ユーザーが最も近い場所から jQuery をロードできるため、Google CDN から jQuery をロードしてください。コード。これにより、サーバー リクエストを減らすことができ、ユーザーが同じく Google CDN の jQuery を使用する別の Web サイトを閲覧すると、ブラウザはキャッシュから jQuery コードを即座に呼び出します。

28, コンテンツをゆっくりと読み込むと、読み込み速度が向上するだけでなく、SEO の最適化も向上します。Ajax を使用して Web サイトを読み込むと、サーバー側の読み込み時間を節約できます。一般的なサイドバー ウィジェットから始めることができます。

[推奨学習:

jQuery ビデオ

、Web フロントエンド開発]

以上がjQueryのパフォーマンスを最適化するにはどうすればよいですか?最適化手法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。