パフォーマンス向上のための6つのjQueryベストプラクティス

jQueryはの1つです の 今日最も人気のあるJavaScriptライブラリそのAPIは非常に使いやすく、それほど急峻ではない学習曲線につながります。多くのプロジェクトでは、動的な機能を持ち込むために一般的なJavaScriptを直接使用する代わりにjQueryコードを使用しています。.

しかしjQueryにも欠点があります. 不用意に使用すると、パフォーマンス上の問題が発生する可能性があります。 それが基づいている言語と同じように。この記事では、パフォーマンスの問題を回避するために役立つjQueryの使用に関するベストプラクティスをいくつか紹介します。.

1.必要に応じてスクリプトを遅延ロードする

スクリプトはページに新しい要素を追加したり、一部のDOMノードのレイアウトやスタイルを変更したりすることがあるため、ブラウザはDOMツリーを作成して画面にピクセルを描画する前にJavaScriptを実行します。だから、によって ページの読み込み中に実行するスクリプトがブラウザに少なくなる, 私たちはできる 所要時間を短縮する 最終的なDOMツリーの作成と描画のために、その後はユーザーは ページを見ることができる.

jQueryでこれを行う1つの方法は、を使用することです。 $ .getScript ページのロード中ではなく、必要なときにスクリプトファイルをロードする.

$ .getScript（ "scripts / gallery.js"、コールバック）; 

必要なときに1つのスクリプトファイルを取得するのはajax関数ですが、取得したファイルはキャッシュされないことに注意してください。のキャッシュを有効にする getScript すべてのajaxリクエストに対して同じことを有効にする必要があります。あなたは以下のコードを使ってそうすることができます：

$ .ajaxSetup（cache：true）; 

避けなさい $（ウィンドウ）.load（） スクリプトにページのサブリソースが必要ない場合

の $（document）.ready（） と同等です DOMContentLoaded （ここで DOMContentLoaded 利用可能です）と $（ウィンドウ）.load（） に 負荷. 最初のものはページ自身のDOMがロードされたときに発生しますが、画像やスタイルシートのような外部アセットはそうではありません。 2つ目は、自身のコンテンツとそのサブリソースを含む、ページが構成されているすべてのものがロードされたときに発生します。.

そのため、ページのサブリソースに依存するスクリプトを作成している場合は、その背景色を変更します。 div それは外部のスタイルシートでスタイルされています。 $（ウィンドウ）.load（）.

そうではない場合は、しかし、それはに固執することをお勧めします $（document）.ready（） なぜなら、jQueryは 準備ができて イベントハンドラ $（document）.ready（） そうでない場合もありますので、可能な場合はそれを使用してください。.

使用する 切り離す 変更が必要な要素をDOMから削除する.

“リフロー” Webページ内のレイアウト変更を指す用語で、ブラウザがページの要素を新しい要素に合わせたり、要素の構造変更に合わせたり、削除された要素によって残されたギャップを埋めるために必要な操作を行います。ページ内のレイアウト変更. リフローは 高価な ブラウザプロセス.

その数を減らすことができます。要素への変更を実行することによる要素への構造的変更によるリフローの防止 後に ページフローから取り出す そして 完了したら元に戻す. テーブルに複数の行を1つずつ追加する場合は、多くのリフローが発生します。だからそれはより良いです DOMツリーからテーブルを取り出し、それに行を追加してDOMに戻します。;これはリフローを減らすでしょう.

jQueryの デタッチ（） ページから要素を削除しましょう, それは違います remove（） 後でページに追加する必要があるときのために、要素に関連付けられたデータを保存するためです。分離された要素は、変更されたときにページに戻すことができます。.

使用する css（） 代わりに高さまたは幅を設定する 高さ（） そして 幅（）

jQueryで要素の高さまたは幅を設定している場合は、 css（） これらの値を設定するのは、 高さ（） そして 幅（） 関数内の一部のレイアウトプロパティにアクセスするため、余分なリフローが発生します。 computeStyleTests jQueryで（最新版でテスト済み）.

コード用 p.height（ "300px"）; ここにリフローがあります.

にとって p.css（"height"： "300px"）;

computeStyleTests いくつかのサポートテストを行うために使用されます。 whileとも呼ばれます 取得 使用する高さと幅 両方 css（） そして 高さ（）/幅（） , しかし 設定 それが求められているだけです 高さ（）/幅（） 必要ないかもしれないので、使用 css（） 代わりに.

5.レイアウトプロパティに不必要にアクセスしない

高さ、幅、マージンなどのレイアウトプロパティにアクセスすると、ページ内でリフローが発生します。その理由は、ブラウザにレイアウトのプロパティを要求するたびに、それが 更新された値を確実に入手する （値が以前に無効化されている場合） 値を再計算し、レイアウトの変更を適用する.

あなたがjQueryを使っているのか、それとも普通のJavaScriptを使っているのか, 不必要にレイアウトプロパティにアクセスすることに注意してください 特にループ内やスタイル変更後.

6.可能なところでキャッシュを利用する

jQueryの関数の中には、有効利用できるキャッシュメカニズムが付属しているものがあります。 Ajaxリクエストはリソースをキャッシュしますが、利用できません。 スクリプト そして JSONP, そのため、すべてのAjaxリクエストにわたってキャッシュしたい場合は、次のようにします。 グローバルに設定 以下のように.

また、を使ってリソースを取得する場合は、 役職 上記の設定でキャッシュを有効にしてもキャッシュされません。.

私が前に述べたように, デタッチ（） 削除される要素に関連するデータをキャッシュします remove（）;隠す（） 初期CSSをキャッシュします 表示 非表示にする前の要素の値。データを失わずに後で復元できるようにします。.

結論

ニーズに最も効果的なjQueryコードを使用していることを確認するための1つの方法は、実際にコードを実行してパフォーマンスの問題がないかどうかに気付くまで待つことです。ある場合は、パフォーマンスツールとデバッガツールを使用して 問題の根本を検出する.

jQueryはJavaScriptの繭のようなもので、ブラウザの互換性や機能に関する追加の機能があります。これらのツールがないと問題を診断するのは困難です。.