JS を書く人なら誰でも、同じエフェクトを書く方法はたくさんあることを知っていますが、結果は同じですが、今日の開発ではページのパフォーマンスが大幅に低下します。 、スクリプトのパフォーマンスの向上がますます重要になっています。 JavaScript コードを最適化するにはどうすればよいですか? 2 点間に最短の直線を引くにはどうすればよいでしょうか?今日は、独自の JavaScript コードを最適に記述する方法の概要を説明します。
従来の Web ページには多くのスクリプトが含まれておらず、少なくとも Web ページのパフォーマンスに大きな影響を与えることはありません。しかし、Web ページがアプリケーションに似てくるにつれて、スクリプトが Web ページに与える影響も増大しています。 Web テクノロジーを使用して開発されるアプリケーションが増えるにつれて、スクリプトのパフォーマンスを向上させることがますます重要になります。デスクトップ アプリケーションは通常、コンパイラを使用してソース コードを最終バイナリに変換します。コンパイラーは、最終的なアプリケーションを生成するときに、可能な限りパフォーマンスの最適化に時間を費やすことができます。 Web アプリケーションにはそんな贅沢はありません。これらは複数のブラウザ、プラットフォーム、アーキテクチャ上で実行する必要があるため、完全にプリコンパイルすることはできません。ブラウザはスクリプトを一度に 1 つずつ取得して解釈してコンパイルしますが、最終的なアプリケーションはデスクトップ アプリケーションと同じくらい速くロードされ、スムーズに実行されるはずです。通常のデスクトップコンピュータから携帯電話に至るまで、さまざまなデバイス上で動作することが期待されています。
ブラウザはこれを実現するのに非常に優れており、Opera は現在のブラウザで最も高速なスクリプト エンジンの 1 つを備えています。ただし、ブラウザーにもいくつかの制限があるため、Web 開発者は注意する必要があります。 Web アプリケーションをできるだけ高速に実行するには、ループを交換したり、結合スタイルを 3 つではなく 1 つ変更したり、実際に実行するスクリプトのみを追加したりするだけで済みます。
この記事では、JavaScript の中核言語である ECMAScript、DOM、ファイル読み込みに至るまで、Web アプリケーションのパフォーマンスを向上させることができるいくつかの変更を示します。
ヒント
ECMAScript
eval または Function コンストラクターの使用を避ける
eval を書き換える
関数が必要な場合は function を使用する
with を使用しないでください
必要な関数では try-catch-finally を使用しないでくださいパフォーマンス
eval と with の使用を分離する
グローバル変数を使用しないようにする
オブジェクトの暗黙的な交換に注意する
パフォーマンスを必要とする関数での for-in の使用を避ける
文字列を接続するために累積形式を使用する
基本的な操作は関数を呼び出すよりも優れています 高速です
setTimeout() と setInterval() に文字列の代わりに関数を渡します
DOM
再描画とリフロー
リフローの数を最小限に抑えます
最小限のリフロー
ドキュメント ツリーを変更します
目に見えない要素を変更する
測定
複数のスタイルを一度に変更する
速度を高める滑らかさ
多数のノードの取得を回避する
XPath による速度を向上させる
DOM のトラバース中の変更を回避する
スクリプトで変数を使用する キャッシュ DOM値
ドキュメントの読み込み
複数のドキュメント間で同じ参照を保持しない
高速な履歴ナビゲーション
XMLHttpRequestを使用
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
