JavaScript は動的言語であるため、Web アプリケーションでパフォーマンスのボトルネックを引き起こす場合があります。ただし、慎重な最適化手法を使用すると、コードの速度と応答性を大幅に向上させることができます。いくつかの重要な戦略を詳しく見てみましょう:
バッチ DOM 更新: DOM を頻繁に変更する代わりに、変更をグループ化して 1 回の操作で更新します。
ドキュメント フラグメントを使用する: ドキュメント フラグメントを作成して DOM 外の要素を操作し、それを 1 回の操作で DOM に挿入します。
innerHTML の活用: 大規模な変更の場合は、innerHTML を使用して要素の HTML コンテンツを直接設定することを検討してください。
イベント委任: イベント リスナーを親要素にアタッチし、イベント バブリングを使用してその子のイベントを処理します。
スロットルとデバウンス: スロットル (イベントのレートを制限) またはデバウンス (非アクティブな期間が続くまでイベントを遅延) によって過剰なイベントの起動を防ぎます。
イベント リスナーの削除: 要素が不要になった場合は、不必要な処理を避けるためにイベント リスナーを削除します。
適切なデータ構造を選択する: 特定のユースケースに基づいて、配列、オブジェクト、マップ、またはセットの使用を検討してください。
効率的なアルゴリズムを実装する: 並べ替え、検索、その他の一般的な操作のアルゴリズムを最適化します。
不必要な計算を避ける: 値が一定のままの場合は、一度計算して再利用のために保存します。
ファイル サイズを削減する: JavaScript コードを縮小して、不要な空白、コメント、セミコロンを削除します。
ファイルを圧縮する: Gzip や Brotli などの圧縮技術を使用して、ファイル サイズをさらに小さくします。
メインスレッドのブロックを避ける: UI のフリーズを防ぐために、非同期操作 (promise、async/await など) を使用します。
Web ワーカー: メインスレッドのブロックを避けるために、CPU 集中型のタスクを Web ワーカーにオフロードします。
データのキャッシュ: 頻繁に使用されるデータをローカルに保存して、ネットワーク リクエストを削減します。
リソースの遅延読み込み: 必要な場合にのみリソースを読み込み、初期ページ読み込みパフォーマンスを向上させます。
プロファイリングおよび最適化ツール
開発者ツールを使用する: Chrome DevTools、Firefox Developer Tools、およびその他のブラウザ ツールには、パフォーマンスのボトルネックを特定するプロファイリング機能が備わっています。
サードパーティ ツールを検討します。さらに詳細な分析を行うには、Lighthouse や WebPageTest などのツールを検討します。
定期的なコード レビュー: 最適化の可能性を特定するために、同僚にコードをレビューしてもらいます。
コーディング規約に従います。コーディング標準とベスト プラクティスに従って、コードの可読性と保守性を向上させます。
これらの戦略を実装すると、JavaScript アプリケーションのパフォーマンスが大幅に向上し、より良いユーザー エクスペリエンスを提供できます。
最適化の取り組みが効果的であることを確認するために、パフォーマンスの向上を忘れずに測定および分析してください。
JavaScript は、まずローカルで変数を検索し、次にゆっくりとスコープをグローバル変数に拡張します。ローカル変数は、最も具体的なスコープから最も具体的でないスコープに基づいて検索され、さまざまなスコープ レベルを介して移動できます。
変数をローカル スコープに保存すると、JavaScript で変数にすばやくアクセスできるようになります。現在のスコープを定義するには、スコープを指定する必要があり、各変数の前に「let」または「const」を付けて関数のスコープも定義する必要があることに注意してください。これにより、検索が防止され、コードも高速化されます。
変数を宣言するときは、let キーワードと const キーワードを使用することをお勧めします。 var を使用すると、そのホイスティング動作により予期しないエラーが発生する可能性があります。
JavaScript では、変数はデータ値を格納するために使用されます。変数を宣言するには、var、let、または const キーワードを使用します。 var は伝統的に使用されてきましたが、より適切に制御し、潜在的な落とし穴を避けるために、let と const を使用することを一般的に推奨します。
var、let、const の主な違い
var: var で宣言された変数は、スコープの先頭に引き上げられます。つまり、宣言される前に使用できるようになります。これは慎重に扱わないと、予期しない動作を引き起こす可能性があります。
let と const: これらのキーワードは変数の値をホイストしませんが、変数宣言自体をホイストします。これは、宣言される前に変数を使用できないことを意味し、一般的なエラーを防ぎます。
var: var で宣言された変数には関数スコープがあります。つまり、変数が宣言されている関数全体内でアクセス可能です。
let と const: これらのキーワードにはブロック スコープがあり、宣言されているブロック (中括弧で囲まれたコード ブロック) 内でのみアクセスできます。これは、よりモジュール化され、体系化されたコードを作成するのに役立ちます。
再宣言:
var: 同じスコープ内で var を使用して変数を再宣言できます。
let と const: 同じスコープ内で let または const を使用して変数を再宣言することはできません。これにより、偶発的な再割り当てが防止され、コードの明瞭さが向上します。
可変性:
var と let: var または let で宣言された変数は、宣言後に新しい値に再割り当てできます。
定数:
const で宣言された変数は再代入できないため、不変になります。
これは、偶発的な変更を防ぎ、コードの信頼性を向上させるのに役立ちます。
再割り当てが必要な変数には let を使用します。
再割り当てすべきではない変数には const を使用します。
どうしても必要な場合を除き、var の使用は避けてください。
コードの読みやすさを向上させるために、変数はその使用法にできるだけ近い形で宣言してください。
意図しない結果を避けるために、変数のスコープに注意してください。
例:
// Using var var message = "Hello, world!"; console.log(message); // Output: "Hello, world!" // Redeclaring message using var var message = "Goodbye!"; console.log(message); // Output: "Goodbye!" // Using let let greeting = "Hi there"; console.log(greeting); // Output: "Hi there" greeting = "Hello again"; console.log(greeting); // Output: "Hello again" // Using const const PI = 3.14159; console.log(PI); // Output: 3.14159 // Attempting to reassign PI (will result in an error) PI = 3.14;
関数の最適化は、効率的な JavaScript コードを作成する上で重要な側面です。これには、アプリケーションの速度を低下させる可能性があるパフォーマンスのボトルネックを特定して対処することが含まれます。一般的な最適化手法の 1 つは、特にループ内での不必要な関数呼び出しを避けることです。
- 関数の結果を保存する: 関数が定数値を返す場合、関数を繰り返し呼び出すのではなく、結果をループの外の変数に保存し、その変数をループ内で使用します。これにより、冗長な関数呼び出しが排除され、パフォーマンスが向上します。
-関数を記憶する: 引数を受け取り、それらの引数に基づいて値を返す関数については、関数を記憶することを検討してください。これには、関数呼び出しの結果をキャッシュして、同じ引数を使用した後続の呼び出しで関数を再実行せずにキャッシュされた結果を返せるようにすることが含まれます。
-関数式を使用する: 場合によっては、特にクロージャを処理する場合、関数宣言の代わりに関数式を使用するとパフォーマンスが向上することがあります。
JavaScript
// Without optimization
function calculateSquare(x) {
return x * x;
}
for (let i = 0; i < 1000000; i++) {
const result = calculateSquare(i);
// Do something with result
}
// With optimization (storing function result)
const square = calculateSquare;
for (let i = 0; i < 1000000; i++) {
const result = square(i);
// Do something with result
}
最適化されたコードでは、calculateSquare 関数がループ外の square 変数に格納されます。これにより、ループ内で関数を繰り返し呼び出す必要がなくなり、パフォーマンスが大幅に向上します。
その他の最適化のヒント
- ネストされたループを避ける: ネストされたループは、パフォーマンスの急激な低下につながる可能性があります。可能であれば、コードを再構築してネストされたループの数を減らしてください。
- 効率的なアルゴリズムを使用する: 実行しているタスクに対して、時間の複雑さが低いアルゴリズムを選択します。
- コードのプロファイリング: プロファイリング ツールを使用してパフォーマンスのボトルネックを特定し、最も重要な領域に最適化の取り組みを集中させます。
JavaScript の縮小化とバンドルについて理解する
縮小とバンドルは、JavaScript コードを最適化し、Web アプリケーションのパフォーマンスを向上させるために不可欠な手法です。
縮小化
不要な文字の削除: 縮小化は、JavaScript コードから空白、コメント、その他の必須ではない文字を削除し、機能に影響を与えることなくファイル サイズを削減します。
読み込み時間の改善: ファイル サイズが小さいほど読み込みが速くなり、ユーザー エクスペリエンスが向上します。
手動またはツールを使用して実行可能: コードを手動で縮小することも可能ですが、UglifyJS や Terser などの自動化ツールを使用する方がはるかに効率的かつ効果的です。
バンドル
2.モジュール管理: Webpack や Gulp などのバンドラーもモジュール管理を処理できるため、コードをモジュール式コンポーネントに編成し、オンデマンドで読み込むことができます。
読み込み時間の短縮: ファイル サイズが削減され、HTTP リクエストが減少することで、ページの読み込みが高速化されます。
ユーザー エクスペリエンスの向上: ユーザーは、読み込みが速い Web サイトの利用を継続する可能性が高くなります。
SEO の向上: 読み込み時間が短縮されると、Web サイトの検索エンジンのランキングが向上します。
縮小とバンドルのベスト プラクティス
バンドラーを使用する: Webpack と Gulp は、JavaScript コードをバンドルするための一般的な選択肢です。
縮小の構成: ビルド プロセス中に JavaScript ファイルを自動的に縮小するようにバンドラーを構成します。
画像やその他のアセットを最適化する: JavaScript に加えて、画像や CSS ファイルなどの他のアセットを縮小および最適化して、パフォーマンスをさらに向上させます。
コンテンツ配信ネットワーク (CDN) を使用する: 縮小してバンドルされたファイルを複数のサーバーに分散して、読み込み時間を短縮します。
テストと監視: Web サイトのパフォーマンスを定期的にテストし、縮小とバンドル後に発生する可能性のある問題を監視します。
例:
// Using var var message = "Hello, world!"; console.log(message); // Output: "Hello, world!" // Redeclaring message using var var message = "Goodbye!"; console.log(message); // Output: "Goodbye!" // Using let let greeting = "Hi there"; console.log(greeting); // Output: "Hi there" greeting = "Hello again"; console.log(greeting); // Output: "Hello again" // Using const const PI = 3.14159; console.log(PI); // Output: 3.14159 // Attempting to reassign PI (will result in an error) PI = 3.14;
この例では、Webpack 構成が運用モードに設定されており、これにより縮小化やその他の最適化が自動的に有効になります。
メモリ リークは、JavaScript コードが不要になったオブジェクトへの参照を意図せず保持した場合に発生します。これにより、時間の経過とともにメモリ消費量が増大し、最終的にはアプリケーションのパフォーマンスに影響を及ぼし、クラッシュを引き起こす可能性があります。
-グローバル変数: 変数をグローバルに宣言すると、意図せずオブジェクトへの参照が作成され、オブジェクトがガベージ コレクションされなくなる可能性があります。
- イベント リスナー: DOM から要素が削除されるときにイベント リスナーが削除されない場合、イベント リスナーはそれらの要素への参照を保持し続けることができ、それらの要素がガベージ コレクションされるのを防ぎます。
-クロージャ: クロージャは、不要になった変数への参照を誤って作成し、メモリ リークを引き起こす可能性があります。
-循環参照: オブジェクトが循環的に相互に参照すると、相互にガベージ コレクションが行われるのを防ぐことができます。
-ローカル変数を使用する: 意図しないグローバル参照を避けるために、必要なスコープ内で変数を宣言します。
イベント リスナーを削除する: 要素が不要になったら、メモリ リークを防ぐためにそのイベント リスナーを削除します。
-循環参照の解除: 循環参照が必要な場合は、ガベージ コレクションを可能にするために手動で解除します。
-弱い参照を使用する: 場合によっては、弱い参照を使用すると、オブジェクトが他のオブジェクトによって参照されている場合でもガベージ コレクションが可能になり、メモリ リークを防ぐことができます。
コードのプロファイリング: プロファイリング ツールを使用して、潜在的なメモリ リークを特定し、経時的にメモリ消費を追跡します。
// Using var var message = "Hello, world!"; console.log(message); // Output: "Hello, world!" // Redeclaring message using var var message = "Goodbye!"; console.log(message); // Output: "Goodbye!" // Using let let greeting = "Hi there"; console.log(greeting); // Output: "Hi there" greeting = "Hello again"; console.log(greeting); // Output: "Hello again" // Using const const PI = 3.14159; console.log(PI); // Output: 3.14159 // Attempting to reassign PI (will result in an error) PI = 3.14;
最適化されたコード:
JavaScript
// Without optimization
function calculateSquare(x) {
return x * x;
}
for (let i = 0; i < 1000000; i++) {
const result = calculateSquare(i);
// Do something with result
}
// With optimization (storing function result)
const square = calculateSquare;
for (let i = 0; i < 1000000; i++) {
const result = square(i);
// Do something with result
}
最適化されたコードでは、要素が DOM から削除される前にイベント リスナーが削除されるため、メモリ リークが防止されます。
これらのガイドラインに従うことで、より堅牢で保守しやすく、エラーのない JavaScript コードを作成できます。
コーディングを楽しんでください!
以上がJavaScript パフォーマンスの最適化: 総合ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
