JQuery パフォーマンスの最適化に関するいくつかの提案_jquery

誰もが jquery パフォーマンスの最適化のトピックについて何らかの知識を持っている必要があります。以下は jquery のパフォーマンスの最適化について収集した情報です。参考にしてください。

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

1. 常に #id セレクターから継承する: これは jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。

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

3. サブクエリを使用します。将来の使用のために親オブジェクトをキャッシュします。

4. コンテキスト検索の代わりに find() を使用します。

5. 強力なチェーン操作を利用する: jQuery のチェーン操作を使用すると、セレクターをキャッシュするよりも効果的です。

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

1. jQuery オブジェクトをキャッシュする: 頻繁に使用する要素をキャッシュします。 2. DOM 挿入を行う場合、すべての要素を 1 つの要素にカプセル化します。 ここでの基本的な考え方は、本当に必要なものをメモリ内に構築してから、DOM を更新することです。これは jQuery のベスト プラクティスではありませんが、有効な JavaScript 操作には必要です。直接 DOM 操作は非常に遅い

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

3. 同等の関数の代わりに直接関数を使用する: パフォーマンスを向上させるには、$.get()、$.getJSON ()、$.post() の代わりに $.ajax() などの直接関数を使用する必要があります。次のいくつかは $.ajax() を呼び出します。

4. 後で使用するために jQuery の結果をキャッシュします。
多くの場合、javasript アプリケーション オブジェクトを取得します。App を使用して、後で使用するために頻繁に選択するオブジェクトを保存できます。

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

1. $(window).load:

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

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

4. その他の jQuery パフォーマンス最適化に関する一般的な提案

1. 最新バージョンの jQuery を使用します

多くの場合、最新バージョンが最適です。バージョンを変更した後は、必ずコードをテストしてください。完全な下位互換性がない場合もあります。

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

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

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

5. 1 つのメイン JS ファイルに圧縮し、ダウンロード数を最小限に抑えます
どのファイルをロードするかを決定したら、それらを 1 つのファイルにパッケージ化します。 Minify (バックエンド コードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンライン ツールを使用してファイルを圧縮するなど、いくつかのオープン ソース ツールを使用してファイルを自動的に圧縮します。私のお気に入りは JSCompressor です。

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

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