VUE3.0 をすぐに始める方法: 学習に入る
私は、肥大化した動的 Web アプリケーションを軽量化するための jQuery パフォーマンスの最適化に関するヒントを探してきました。多くの記事を検索した結果、パフォーマンスを最適化するために最も一般的に使用される最良の提案をいくつかリストすることにしました。 [推奨学習: jQuery ビデオ チュートリアル]
1. セレクターのパフォーマンス最適化に関する提案
1. 常に#idセレクターから継承する
これは、jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。
2. クラスの前でタグを使用する
jQuery で 2 番目に速いセレクターはタグ セレクター ($('head') など) です。これは、ネイティブ Javascript メソッド getElementByTagName() から直接取得されるためです。したがって、クラスを変更するには常にタグを使用することをお勧めします (最も近い ID を忘れないでください)。jQuery
のクラス セレクターは IE ブラウザーのすべての DOM ノードを走査するため、最も時間がかかります。クラスセレクターの使用は避けてください。 ID の変更にもタグを使用しないでください。
3. 将来の使用のためにサブクエリを使用して
親オブジェクトをキャッシュします
。 4. Sizzle の「右から左」モデルに適応するようにセレクターを最適化します
。 バージョン 1.3 以降、jQuery はセレクター エンジンの以前のバージョンと同じ Sizzle ライブラリを使用します。表現が大きく異なります。これは、「右から左」モデルを「左から右」モデルに置き換えます。
5.
find() 関数を見つけるのにコンテキストを使用する代わりに、find() を使用する方が確かに高速です。ただし、ページに多数の DOM ノードがある場合は、前後の検索にさらに時間がかかることがあります。
6. 強力なチェーン操作を使用します。 セレクターをキャッシュするよりも、jQuery のチェーン操作を使用する方が
効果的です。
7.セレクターを頻繁に使用する場合は、
独自のセレクターを作成します。
そのため、jQuery の $.expr[':'] オブジェクトを拡張して独自のセレクターを作成します。
2. DOM 操作を最適化するための提案
8.よく使用する
jQuery オブジェクトと
キャッシュ要素。ここでの基本的な考え方は、実際に必要なものをメモリ内
に
作成することです。次に DOM を更新します。これは jQuery のベスト プラクティスではありませんが、有効な JavaScript 操作には必要です。直接 DOM 操作は非常に遅いです。 HTML 構造の変更は最小限に抑えます。
10. jQuery は例外をスローしませんが、開発者はオブジェクトもチェックする必要があります。jQuery は
ユーザーに大量の例外をスローしませんが、開発者はこれに依存すべきではありません。 jQuery は通常、オブジェクトが存在するかどうかを判断する前に、無駄な関数を多数実行します。したがって、オブジェクトへの一連の参照を行う前に、まずそのオブジェクトが存在するかどうかを確認する必要があります。
11. 同等の関数ではなく直接関数を使用する。
.ajax() の代わりに .ajax() などの直接関数を使用する必要があります。 .getJSON()、.getJSON()、.post()。後者は $.ajax() を呼び出すためです。
12. 後で使用するために jQuery の結果をキャッシュします。
頻繁に使用するために App を使用して、状態を保存し
ます
。
情報を保存するために .data() 関数を使用することを忘れないでください。
14. jQuery ユーティリティ関数を使用します
。 シンプルで実用的な jQuery ユーティリティ関数を忘れないでください。私のお気に入りは $.isFunction()、isA rray()、isArray()、isArray()、.each() です。
15. 「JS」クラスを HTML ブロックに追加します
。jQuery がロードされた後、ユーザーが JavaScript を有効にした場合にのみ、まず「JS」というクラスを HTML に追加します。 CSS スタイルを追加できます。
3. イベントのパフォーマンスを最適化するための提案
16. Load は
(window).load を使用する場合もあれば、$(document).ready ではなく (window).load() を使用する場合もあります。 .() は、すべての DOM 要素がダウンロードされるまで待機しないため、高速です。使用する前にテストする必要があります。
17. イベント委任を使用します。
コンテナ内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーション シナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲット ノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。
18. Ready イベントの略語を使用します。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. 1 つのメイン JS ファイルに圧縮して、ダウンロード数を最小限に抑えます。
ロードするファイルを決定したら、それらを 1 つのファイルにパッケージ化します。これを自動的に行うには、Minify (バックエンド コードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンライン ツールを使用してファイルを圧縮するなど、いくつかのオープン ソース ツールを使用します。私のお気に入りは JSCompressor です。
26. 必要に応じてネイティブ Javascript を使用するのは素晴らしい
ことですが、jQuery は Javascript のフレームワークでもあることを忘れないでください。そのため、必要に応じて jQuery コードでネイティブ Javascript 関数を使用でき、パフォーマンスを向上させることができます。
27. Google から jQuery フレームワークをロードする
アプリケーションが正式に起動されたら、ユーザーは最も近い場所からコードを入手できるため、Google CDN から jQuery をロードしてください。これにより、サーバー リクエストを減らすことができ、ユーザーが同じく Google CDN の jQuery を使用する別の Web サイトを閲覧すると、ブラウザはキャッシュから jQuery コードを即座に呼び出します。
28.コンテンツをゆっくりと読み込むと、読み込み速度が向上するだけでなく、Web サイトの読み込みに Ajax を使用して、サーバー側の読み込み時間を節約できます。一般的なサイドバー ウィジェットから始めることができます。
【おすすめ学習：jQueryビデオ、Webフロントエンド開発】
以上、jQueryのパフォーマンスを最適化する方法は？最適化方法の概要の詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。
