ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery のヒント(4) JQuery のパフォーマンスを改善するためのヒント_jquery
JQuery のヒント(4) JQuery のパフォーマンスを改善するためのヒント_jquery
- WBOYオリジナル
- 2016-05-16 18:38:391448ブラウズ
選択するときは、ID セレクター
から始めるのが最善です。これは、JQuery が内部で ID 選択に document.getElementByID メソッドを使用しており、他のすべての DOM 選択メソッドよりも高速であるため、これは理解しやすいと思います。したがって、$("#") で始めるのが最適です。例:
コードをコピー コードは次のとおりです。 🎜>
class=" d">
$(".b .c .d")//遅いもの
$("#a .b .c .d")//速いもの
$() のコンテキストを提供します
$() を使用してページ要素を選択する場合、選択範囲を提供すると、選択時間を短縮できます。つまり、セレクターで狭い範囲内のみをフィルターできるようにします。ページ全体の代わりにページ もちろんフィルタリング時間は短縮されます。これは、$() 関数内のコンテキストとして 2 番目のパラメータを提供することで実現できます
Copy code
コードは次のとおりです。
find メソッドの使用がすべてのメソッドの中で最も効率的です
もちろん、ID セレクター、つまり $(" #..") を使用して選択する場合、コンテキスト パラメーターを指定する必要はありません。これは速度には影響しません。
保存。頻繁に使用される JQuery でラップされた要素
タイトルにあるように、$( )ページ要素の選択には時間がかかるため、この無駄は、
などの変数として保存すると回避できます。
コードをコピー
保存。頻繁に使用される JQuery でラップされた要素
タイトルにあるように、$( )ページ要素の選択には時間がかかるため、この無駄は、
などの変数として保存すると回避できます。
コードをコピー
コードは次のとおりです:
- one ;
- 2
コードは次のとおりです:ご覧のとおり、セレクターを使用して選択した要素をカンマで区切ったり、複数の要素を選択したりすると、コードがより簡潔になるだけでなく、ただし、作成される JQuery インスタンスの数を減らすことで、パフォーマンスが若干向上します。
ループが多い場合は $().each の使用を避け、for ループを使用してください
$ を使用する ().each メソッドを使用すると、ループを実行する際のプログラミングが容易になります。 $().each を使用する場合、ループの数が少ない場合のパフォーマンスへの影響は無視できますが、数が多い場合、パフォーマンスへの影響は大きくなります。
情報を確認したところ、数値が 1000 未満の場合は、$().each メソッドが使用できるとのことです。使用する必要があります。
DOM に対する操作を可能な限り最小限に抑えます。
ページ上の DOM に対する操作 (ページ上のテキストの挿入や削除など) は比較的負荷が高いため、この変化を最小限に抑えることが、パフォーマンスのベスト プラクティスです。例:コードをコピー コードは次のとおりです:
最初の例では 100 回変更された DOM には影響しませんが、2 番目の例では DOM が 1 回変更されただけであり、パフォーマンスの違いは明らかです。
JQuery アニメーション効果をブロックできます
場合によっては、JQuery アニメーションをオフにできれば、パフォーマンスを向上させることができます。ブロック方法は次のとおりです。コードをコピーします コードは次のとおりです。
パラメータが JS オブジェクトである場合は、JQuery に非常に適したオブジェクト
を使用してください。プラグイン、または JQuery の CSS および attr メソッドを使用して、キー/値または JS キー/値オブジェクトのペアをパラメーターとして渡すと、
などの JQuery オブジェクトの作成を減らすことができます。
コードをコピーします
コードをコピーします
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。