ジャバスクリプト — パフォーマンス

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分がたくさんあるので、コードの品質を低下させないようにするべきことがあります.ベストプラクティスに従うことによって、我々は誰でも簡単に動作するようにエレガントで扱いやすいコードを作成することができます.
この記事では、我々は我々のアプリのパフォーマンスを向上させる方法を見ていきます.アクションには、変数をループするための最速の方法を使用して、データをキャッシュすることが含まれます.

変数とプロパティへのアクセスを減らす

我々は我々のアプリで変数とオブジェクトのプロパティにアクセスする時間を減らす必要があります.
これは私たちがこれをするたびに、CPUはメモリ内の項目に何度もアクセスして結果を計算する必要があるからです.
したがって、我々はできるだけ少しこれをしなければなりません.
例えば、ループがあれば、次のように書くべきではありません.

for (let i = 0; i < arr.length; i++) {

}

代わりに

let length = arr.length;
for (let i = 0; i < length; i++) {

}

このようにarr.length は、すべての反復でアクセスするのではなく、ループ内で一度だけ参照されます.

変数をループする最速の方法

JavaScriptでは、iterableオブジェクトを反復処理する複数の方法があります.一つは古き良きfor ループ.その他の方法にはfor...of ループforEach 配列のメソッド.map and filter また、マップとフィルター操作として配列を通してループします.また、while ループ.
ループを実行するすべての方法for ループは最速の方法ですlength 上記のように.キャッシングlength しかし、ループをよりよく実行することもあります.
いくつかのブラウザエンジンを最適化しているfor Lengthプロパティをキャッシュすることなくループします.
The while 指数を減らすループは、約1.5倍より遅いですfor ループ
使用forEach ループは、10倍より遅いですfor ループは、特に大きな配列のために、それを避けるためにおそらくより良いです.
結果がわかるhere .

アクセスを減らす

ブラウザがWebページから要素を取得してからオブジェクトを作成し、それを返す必要があるため、DOMへのアクセスは高価な操作です.
DOMアクセスを減らすために、DOMノードオブジェクトを1回以上操作する必要がある場合は、DOMノードオブジェクトを設定する必要があります.
たとえば、次のHTMLを持っていて、数秒後にテキストを設定したい場合は、次のようにします.

<p id='foo'>

</p>

次のコードを書くことができます.

const setText = (element, textContent) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      element.textContent = textContent;
      resolve();
    }, 3000)
  })
}

(async () => {
  const foo = document.querySelector('#foo');
  await setText(foo, 'foo');
  await setText(foo, 'bar');
  await setText(foo, 'baz');
})();

上記のコードでは、操作するHTML要素と設定するテキストコンテンツを取得する関数が1つあります.
The setText 関数は、3秒後に指定した要素にテキストを設定するという約束を返す.
それから、我々はasync テキストを3回セットする機能.重要な部分は、各呼び出しの要素への参照を渡すことです.この方法では、Webページから要素を取得する必要はありません3回、高価な操作です.
写真でSawyer Bengtson をUnsplash

DOMの大きさを減らす

DOMツリーのレンダリングは遅いです.したがって、ツリーのサイズを小さくする必要があります.
それの周りの方法はありませんが、できるだけ簡単に私たちのWebページを確認します.
より小さなDOMを持つことは、メソッドquerySelector , getElementById , or getElementsByTagName より少ないので、より速く探すために、より速く.
また、ロードには少ないので、ページレンダリングパフォーマンスが向上します.これは、電話やタブレットのような遅いデバイスに特に当てはまります.

不要な変数を宣言しない

変数を宣言するたびに、ブラウザは変数のメモリ空間を予約しなければなりません.したがって、メモリ使用量を減らすためには、あまりにも多くの変数を宣言する必要があります.
たとえば、次のHTMLを指定します.

<div id='foo'>
  <p>

  </p>
</div>

そして、テキストの内容を設定しますp 要素のように書くべきではありません.

const foo = document.querySelector('#foo');
const p = foo.querySelector('p');
p.textContent = 'foo';

2変数があるので.これは2つのJavaScript変数に値を格納する必要があることを意味します.
代わりに、書くことによって変数宣言を減らすことができます.

document.querySelector('#foo p').textContent = 'foo';

我々が見ることができるように、我々はquerySelector CSSセレクタで何かを選択する方法.つまり、このメソッドと関連するquerySelectorAll CSSセレクタを使用してHTML要素ノードを選択できるので、要素を選択する方法.

スクリプトの読み込みを延期する

JavaScriptファイルの読み込みは高価な操作です.ブラウザはファイルをダウンロードして内容を解析し、マシンコードに変換して実行します.
ブラウザは、タイムラインで1つのファイルをダウンロードするので、それは他の操作を保持するから起こっている.
したがって、私たちはできるだけそれを遅らせるべきです.これを行うことによってscript 最後にタグ.また、我々はdefer 属性をscript これを行うタグ.
また、ページが作成された後にスクリプトを実行できますscript その要素を次のように追加します.

window.onload = () => {
  const element = document.createElement("script");
  element.src = "https://code.jquery.com/jquery-1.12.4.min.js";
  document.body.appendChild(element);
};

ページ読み込み後に読み込むことができるものは、スクリプトの読み込みのこのメソッドを使用できます.
我々はいくつかのことをしてページをスピードアップすることができます.まず、変数にデータをキャッシュすることができます.それから、我々はより速くアイテムを通してループすることができますfor ループ.
また、ロードする必要のあるアイテムを減らすためにDOMサイズを減らすことができます.また、変数に代入することでDOMオブジェクトをキャッシュすることもできます.
また、不必要な変数を宣言してはいけません.また、スクリプトの読み込みを可能な限り延期するべきです.