JavaScriptは、これまでで最も人気のあるプログラミング言語の1つになりました。W3Techのデータによると、世界のWebサイトの96％近くがW3Techを使用しています。Webに関する重要な事実は、Webサイトにアクセスするユーザーが使用するデバイスのハードウェア仕様を制御できないことです。エンドユーザーがWebサイトにアクセスすると、ハイエンド機器またはローエンド機器を使用する場合があり、ネットワーク接続条件が異なる場合があります。これは、あらゆるユーザーのニーズを満たすために、可能な限りWebサイトを最適化する必要があることを意味します。
この記事では、パフォーマンスを向上させるためのより優れたJavaScriptコードを作成するのに役立つヒントをいくつか紹介します。
ちなみに、JSコンポーネントを共有して再利用し、高品質のコード（作成に時間がかかる）と妥当な納期の適切なバランスを維持してください。Bitなどの一般的なツールを使用して、任意のプロジェクト（一般的なJS、TS、React、Vueなど）のコンポーネントをBitのコンポーネントセンターと簡単に共有できます。
1.未使用のコードと関数を削除するアプリケーションに含まれるコードが多いほど、クライアントに送信する必要のあるデータが多くなります。また、ブラウザはコードを分析して解釈するためにより多くの時間を必要とします。場合によっては、まったく使用しない機能をたくさん詰め込むことがあります。クライアントのブラウザに負担をかけないように、これらの余分なコードを本番環境にプッシュするのではなく、開発環境に保持することをお勧めします。
特定の関数またはコードセグメントが必要かどうかを自問してください。未使用のコードを手動で削除することも、UglifyやGoogleのClosureCompilerなどのツールを使用して削除することもできます。ツリーシェイク最適化と呼ばれる手法を使用して、アプリケーションから未使用のコードを削除することもできます。Webpackなどのパッケージングソフトウェアがこのテクノロジーを提供します。詳細については、こちらを参照してください。未使用のnpmパッケージを削除する場合は、コマンドnpm pruneを使用できます。詳細については、NPMのドキュメントを参照してください。
2.キャッシュを可能な限りキャッシュして、待ち時間とネットワークトラフィックを削減します。これにより、リソース表現の表示に必要な時間が短縮され、Webサイトの速度とパフォーマンスが向上します。キャッシングは、キャッシュAPIまたはHTTPキャッシングの助けを借りて実現できます。コンテンツが変更されたときに何が起こるかを知りたい場合があります。特定の条件（新しいコンテンツの公開など）が満たされると、上記のキャッシュメカニズムでキャッシュを処理および再生成できます。
3.メモリリークの回避高水準言語として、JSはメモリ管理などの一部の低レベル管理タスクを担当します。ガベージコレクションは、ほとんどのプログラミング言語に共通のプロセスです。簡単に言うと、ガベージコレクションとは、オブジェクトに割り当てられているが、プログラムのどの部分でもまだ使用されていないメモリの収集と解放です。Cのようなプログラミング言語では、開発者はmalloc（）関数とdealloc（）関数を使用して、メモリの割り当てと割り当て解除の操作を処理する必要があります。
ガベージコレクションはJavaScriptで自動的に実行されますが、完全ではない場合もあります。JavaScript ES6では、Map andSetとそれらの「弱い」兄弟オブジェクトが導入されました。WeakMapおよびWeakSetと呼ばれる「弱い」対応物は、オブジェクトへの「弱い」参照を保持します。それらは参照されていない値をガベージコレクションすることを可能にし、それによってメモリリークを防ぎます。WeakMapsについて詳しくは、こちらをご覧ください。
4.できるだけ早くループを解除します。大きなループは間違いなく多くの貴重な時間を消費するため、できるだけ早くループを解除する必要があります。これを行うには、breakキーワードとcontinueキーワードを使用できます。最も効率的なコードを書くのはあなたの責任です。以下の例では、ループから抜け出さないと、コードはループ内で1000000000回実行され、明らかにオーバーロードされます。
let arr = new Array（1000000000）.fill（ '----'）;
arr [970] = 'found'; for（let i = 0; i <arr.length; i ++）{if（arr [i] === 'found'）{console.log（ "Found"）; ブレーク;
}
}
以下の例では、ループが基準を満たしていないときに続行しない場合でも、関数を1000000000回実行します。配列要素が偶数の位置にある場合にのみ処理します。これにより、ループの実行がほぼ半分に削減されます。
let arr = new Array（1000000000）.fill（ '----'）;
arr [970] = 'found'; for（let i = 0; i <arr.length; i ++）{if（i％2！= 0）{続行;
};
process（arr [i]）;
}
サイクルとパフォーマンスの関係について詳しくは、こちらをご覧ください。
5.変数計算の数を最小限に抑える変数の計算数を減らすために、クロージャーを使用できます。素人の言葉で言えば、JavaScriptのクロージャを使用すると、内部関数から外部関数のスコープにアクセスできます。関数が作成される（呼び出されない）たびにクロージャが作成されます。内部関数は、外部関数に戻った後でも、外部スコープ内の変数にアクセスできます。2つの例を見てみましょう。これらの例は、Bretのブログからのものです。
function findCustomerCity（name）{const texasCustomers = ['John'、 'Ludwig'、 'Kate'];
const californiaCustomers = ['Wade'、 'Lucie'、 'Kylie'];
texasCustomers.includes（name）を返しますか？'テキサス'：
californiaCustomers.includes（name）？'カリフォルニア'： '不明';
};
上記の関数を複数回呼び出すと、毎回新しいオブジェクトが作成されます。呼び出されるたびに、変数texasCustomersとCaliforniaCustomersによって不要なメモリの再割り当てが発生します。
function findCustomerCity（）{const texasCustomers = ['John'、 'Ludwig'、 'Kate'];
const californiaCustomers = ['Wade'、 'Lucie'、 'Kylie'];
戻り名=> texasCustomers.includes（name）？'テキサス'：
californiaCustomers.includes（name）？'カリフォルニア'： '不明';
}; let cityOfCustomer = findCustomerCity（）;
cityOfCustomer（ 'John'）; // TexascityOfCustomer（ 'Wade'）; // CaliforniacityOfCustomer（ 'Max'）; //不明
上記の例では、クロージャを使用して、変数cityOfCustomerに戻る内部関数が外部関数findCustomerCity（）の定数にアクセスできます。さらに、渡された名前をパラメーターとして内部関数が呼び出されるたびに、定数を再度インスタンス化する必要はありません。閉鎖の詳細については、Prashantのブログ投稿を読むことをお勧めします。
6. DOMアクセスを最小限に抑えます。他のJavaScriptステートメントと比較して、DOMへのアクセス速度は非常に遅いです。DOMに変更を加えてレイアウトの再描画をトリガーする場合は、しばらく待つ必要があります。DOM要素へのアクセス数を減らすために、一度アクセスしてからローカル変数として使用してください。要件を完了したら、変数の値を削除するために、必ずnullに設定してください。これにより、ガベージコレクションプロセスがトリガーされるため、メモリリークが防止されます。
7.圧縮ファイルは、圧縮方法（Gzipなど）を使用してJavaScriptファイルのサイズを縮小できます。ブラウザは小さいアセットをダウンロードするだけでよいため、ファイルが小さいほどWebサイトのパフォーマンスが向上します。このタイプの圧縮方法では、ファイルサイズを最大80％削減できます。圧縮について詳しくは、こちらをご覧ください。
8.最終的なコードの縮小縮小と圧縮は同じだと考える人もいますが、そうではありません。圧縮では、特別なアルゴリズムを使用してファイルの出力サイズを変更します。縮小するときは、JavaScriptファイルのコメントと余分なスペースを削除する必要があります。このプロセスを支援するために、多くのツールとソフトウェアパッケージがオンラインで見つかります。縮小は、ページ最適化の標準的な方法であり、フロントエンド最適化の主要なステップの1つになっています。縮小すると、ファイルサイズを最大60％削減できます。ズームアウトについて詳しくは、こちらをご覧ください。
9.スロットルとデバウンスを使用すると、これら2つの手法を使用して、コードが処理する必要のあるイベントの数を厳密に制御できます。スロットリングは、指定された機能がタイムアウトできる最大回数です。たとえば、「onkeyupイベント関数を最大で1000ミリ秒に1回実行する」などです。つまり、1秒間に20個のキーを押しても、イベントは1秒間に1回だけトリガーされます。これにより、コードの負担が軽減されます。一方、アンチシェイクとは、同じ機能が最後に実行されてから、同じ機能を再度実行するための最短時間を指定することです。つまり、「この関数は、最後に関数が呼び出されてから少なくとも600ミリ秒後に実行されます」。アーティキュレートフローとアンチシェイクの詳細については、クイックスタートをご覧ください。独自のアンチシェイクおよびスロットル機能を実装することも、LodashやUnderscoreなどのライブラリからインポートすることもできます。
10. Deleteキーワードの使用は避けてください。deleteキーワードは、オブジェクトから属性を削除するために使用されます。このキーワードのパフォーマンスはあまり良くなく、将来のアップデートで修正される予定です。または、不要なプロパティを未定義に設定することもできます。
const object = {name： "Jane Doe"、age：43}; object.age = undefined;
Mapオブジェクトを使用することもできます。Bretは、deleteメソッドの方が高速であると考えています。
11.非同期コードを使用して、スレッドのブロックを防ぎます。JavaScriptは同期であり、デフォルトでシングルスレッドであることを知っておく必要があります。ただし、場合によっては、コードで多くの計算が必要になります。コードは本質的に同期的です。つまり、コードの一部が実行されている間、他のコードステートメントは前者が実行を終了するまで実行がブロックされます。これにより、全体的なパフォーマンスが低下します。ただし、非同期コードを使用することで、この状況を回避できます。非同期コードは以前はコールバックの形式で記述されていましたが、ES6では非同期コードを処理する新しいスタイルが導入されました。この新しいスタイルはPromiseと呼ばれます。コールバックとPromisesの詳細については、MDNの公式ドキュメントをご覧ください。しかし待ってください... JavaScriptはデフォルトで同期的であり、シングルスレッドでもあります。シングルスレッドで非同期コードを実行するにはどうすればよいですか？これは多くの人々が混乱しているところです。これを行うには、主にブラウザのバックグラウンドで実行されているJavaScriptエンジンに依存します。JavaScriptエンジンは、JavaScriptコードを実行するコンピュータープログラムまたはインタープリターです。JavaScriptエンジンは、複数の言語で記述できます。たとえば、ChromeブラウザをサポートするV8エンジンはC ++で記述されていますが、FirefoxブラウザをサポートするSpiderMonkeyエンジンはCおよびC ++で記述されています。これらのJavaScriptエンジンは、バックグラウンドでタスクを処理できます。ブライアン氏によると、コールスタックはWeb API関数を識別し、それらをブラウザに渡して処理することができます。ブラウザがこれらのタスクを完了すると、タスクは戻り、コールバックとしてスタックにプッシュされます。Node.jsがこれらのタスクをどのように実行するのか疑問に思われるかもしれませんが、結局のところ、ブラウザーの助けはありません。実際、ChromeをサポートするV8エンジンは、Node.jsの背後にあるサポートでもあります。これは、ノードエコシステムにおけるこのプロセスを説明するSalilによるすばらしいブログ投稿です。
12.コード分割を使用するGoogleLight Houseの使用経験がある場合は、「最初の満足のいくペイント」と呼ばれるインジケーターに間違いなく精通しているはずです。これは、灯台レポートのパフォーマンスセクションで追跡される6つのメトリックの1つです。First Contentful Paint（FCP）は、ユーザーがページにアクセスした後、ブラウザーが最初のDOMコンテンツをレンダリングするのにかかる時間を測定します。ページ上の画像、白以外の要素、およびSVGはDOMコンテンツと見なされ、iframe内にコンテンツはありません。より高いFCPスコアを取得するための最良の方法の1つは、コード分割を使用することです。コード分割は、送信の開始時に必要なモジュールのみがユーザーに送信される手法です。最初に送信されるペイロードのサイズを小さくすると、FCPスコアに大きく影響します。人気のあるモジュールパッカー（webpackなど）は、コード分割機能を提供できます。ネイティブESモジュールを使用して、各モジュールを個別にロードすることもできます。ネイティブESモジュールの詳細については、こちらをご覧ください。
13.非同期と延期の使用最近のWebサイトでは、スクリプトはHTMLよりも密度が高く、サイズが大きく、処理時間が長くなります。デフォルトでは、ブラウザはスクリプトがダウンロードされて実行されるのを待ってから、ページの残りの部分を処理する必要があります。そのため、不格好なスクリプトはWebページの読み込みを妨げる可能性があります。この状況を回避するために、JavaScriptは非同期と延期と呼ばれる2つのテクノロジーを提供します。これらの属性をに追加する必要があります
14. Web Workersを使用して、CPUを集中的に使用するタスクをバックグラウンドで実行します。WebWorkersを使用すると、バックグラウンドスレッドでスクリプトを実行できます。高強度のタスクがある場合は、それらをWebワーカーに割り当てることができます。これにより、ユーザーインターフェイスに干渉することなくタスクを実行できます。作成後、Web Workerは、コードで指定されたイベントハンドラーにメッセージを投稿して、JavaScriptコードと通信できます。その逆も可能です。Web Workersの詳細については、MDNドキュメントを読むことをお勧めします。
【免责声明：本文图片及文字信息均由千锋重庆Java培训小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】