ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery を最適化し、Web ページの読み込み速度を向上させる_jquery
常に ID セレクターから継承
クラスの前にタグを使用
jquery オブジェクトをキャッシュ
強力なチェーン操作をマスター
サブクエリを使用
直接 DOM 操作の場合 制限
バブリング
排除無効なクエリ
$(window).load に遅延
js を圧縮
jquery ライブラリを完全に習得
1. 常に ID セレクター
から継承します。jquery で最も速いセレクターは ID セレクターです。これは Javascript の getElementById() メソッドから直接取得されるためです。
var Traffic_button = $('#content .button');
ID:
var Traffic_button = $('#traffic_button');
複数の要素を選択
複数要素の選択についての言及は、実際には DOM のトラバーサルとループに関するものであり、パフォーマンスを向上させるには、最も近い ID から継承するのが最善です。
var Traffic_lights = $('#traffic_light input');
2. クラスの前にタグ
を使用します2 番目に速いセレクターはタグ セレクター ($('head')) です。これはネイティブの getElementsByTagName() メソッドからのものであるためです。
var active_light = $('#traffic_light input.on');
注: クラスは jquery で最も遅いセレクターであり、IE ブラウザーでは、使用される場所に関係なくすべての DOM ノードを走査します。
タグ名で ID を変更しないでください。次の例では、すべての div 要素を走査して、ID が「content」のノードを検索します。
var content = $('div#content'); ID による ID の変更は不要です:
var Traffic_light = $('#content #traffic_light');
3. jquery オブジェクトをキャッシュする
jquery オブジェクトを変数にキャッシュする習慣を身につけます。
これは絶対に行わないでください:
後で使用できるように jquery 結果をキャッシュします
プログラムの他の部分で jquery 結果オブジェクトを使用する予定がある場合、または関数が複数回実行される場合は、それらをグローバル変数にキャッシュします。
jquery の結果を保存するグローバル コンテナを定義します。他の関数で参照できます:
上記の例は次のように書くこともできます:
5. サブクエリ
を使用します。jQuery を使用すると、ラップされたオブジェクトに対して追加のセレクター操作を使用できるようになります。親オブジェクトを変数に保存したため、その子要素に対する操作が大幅に改善されました:
6. 直接 DOM 操作を制限する
ここでの基本的な考え方は、実際に必要なものをメモリ内に構築してから DOM を更新することです。これは実際には jQuery のベスト プラクティスではありませんが、有効な JavaScript の直接操作には必要です。たとえば、リスト要素のセットを動的に作成したい場合は、次のことは絶対に行わないでください:
jquery の clone() メソッドを試してみると、ノード ツリーのコピーが作成され、「オフライン」方法で DOM 操作を実行できるようになり、操作が完了したらノード ツリーに戻すことができます。
DOM DocumentFragments を使用します。jQuery の作成者が述べたように、そのパフォーマンスは直接 dom 操作よりも大幅に優れています。
7. バブリング
特別な状況を除いて、すべての JS イベント (クリック、マウスオーバーなど) は親ノードにバブルアップします。これは、複数の要素で同じ関数を呼び出す必要がある場合に便利です。
この非効率的な複数要素のイベント リスニングの代わりに、親ノードに 1 回バインドするだけで、どのノードがイベントをトリガーしたかを計算できるようになります。たとえば、この動作を多くの入力ボックスのあるフォームにバインドしたいとします。選択された入力ボックスにクラスを追加します
このようなイベントのバインドは非効率です:
8. 無効なクエリを削除します
jquery は一致する要素がない状況を非常にエレガントに処理できますが、サイト全体に 1 つのグローバル js しかない場合、すべての jquery 関数が $( に詰め込まれる可能性が非常に高くなります。 document)ready (function(){//あなたが誇るすべてのコード}).
ページ内で使用される関数のみを実行します。最も効果的な方法は、テンプレートが js をいつどこで実行するかを正確に制御できるように、インライン初期化関数を使用することです。
たとえば、「記事」ページ テンプレートでは、本文の最後に次のコードを引用できます。
グローバル js ライブラリは次のようになります:
var mylib =
{
article_page :
{
init : function()
{
// 記事固有の jQuery 関数。
}
} ,
Traffic_light :
{
init : function()
{
// 信号機の独自の jQuery 関数。
}
}
}
9. $(window).load に従う
Jquery には、開発者にとって非常に魅力的な機能があり、$(document).ready の下に何でもぶら下げてイベントのふりをすることができます。$(document).radiy は確かに非常に便利ですが、他の要素がダウンロードされる前にページがレンダリングされるときに実行される可能性があります。ページが常に読み込まれている場合、それはおそらく $( document).ready です。関数。
jquery 関数を $(window).load イベントにバインドすることで、ページの読み込み時の CPU 使用率を削減できます。この関数は、すべての HTML (