JQuery のパフォーマンスの最適化 Teaching_jquery

jQuery は非常に優れた JavaScript フレームワークです。jQuery を使用するときは、長い JavaScript コードに戻りたくないので、jQuery の最適化が目の前にあります。では、JQuery を最適化する際にはどのような側面から始めるべきでしょうか?

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

新しいバージョンでは、古いバージョンと比較してパフォーマンスが向上し、新しい機能が追加されます。

2. セレクターの使用

通常、ID セレクター、クラス セレクター、要素セレクター、擬似クラス セレクター、要素セレクターを使用します。これを使用するときの私の提案は、id セレクターの後に、クラス セレクター > 要素セレクター > 疑似クラス セレクターを使用することです。

セレクターの話ですが、必要がなければ文章を挿入する必要があります。セレクターを使用して検索する場合は、id を持つ親要素から開始して、段階的に下方向に検索するのが最適です。

3. jQuery を過度に使用しない

一文を思い出してください: ネイティブが最も速いです。 jQuery は書き込みを減らし、より多くのことを実行します (書き込みを減らし、より多くのことを実行します)。

4. キャッシュを適切に行う

ノードを再利用したい場合は、変数を使用してノードを保存し、使用時に呼び出すことができます。ノードを繰り返し取得して効率を低下させることは避けてください。

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

var inputSelect = $("#head . head_right input" );
inputSelect.find("a");
inputSelect.find("i");

5. チェーン操作を使用する

jQuery のハイライトの 1 つは、チェーン操作を使用できることです。

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

$("#content").find (".div").eq(2).html("Hello World");

6. イベントの委任

ある種のイベントを実行するために複数の兄弟要素が必要な場合、イベント委任を使用できます。例:

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

;div>

class="div" を持つ各 div にクリック イベントがある場合、イベント委任を使用できます。

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

$("#content").on ("click ","div",function(){

$(this).css("color","#ff5500");
});

7. ループを正しく処理します

ループは時間のかかる操作です。セレクターを使用して要素を直接選択できる場合は、ループを使用して要素を 1 つずつ走査しないでください。

JavaScript のネイティブ メソッド for および while は、jQuery の each() よりも高速です。したがって、ネイティブ メソッドを最初に使用する必要があります。

8. JQuery オブジェクトの生成を削減します

Query オブジェクトを生成すると、対応するプロパティとメソッドが生成され、より多くのリソースが必要になります。したがって、jQuery オブジェクトの生成を減らすようにしてください。

9. 変数のスコープ

複数の関数呼び出しで変数が必要ない場合は、コード実行時のコード検索時間を短縮するために変数を関数内に配置する必要があります。

10. 特定の関数を $(window).load の実行に延期する

$(document).ready は非常に使いやすいですが、ページのレンダリング時に他の要素がダウンロードされる前に実行できます。

11. スクリプトのマージ

スクリプトは 1 つずつロードされるため、スクリプトの数を減らすと効率も向上します。

12. 要素のカプセル化

コンテンツをノードに挿入する場合、最初にコンテンツをカプセル化してから挿入できます。

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

var content = "";
$(" #head").html(content);

もう 1 つは、js ファイルを圧縮することです。

jQuery が使用され続けるにつれて、より多くの最適化方法が発見されるでしょう。