JavaScript パフォーマンスの最適化: 総合ガイド-jsチュートリアル-php.cn

JavaScript Performance Optimisation: Comprehensive Guide

JavaScript は動的言語であるため、Web アプリケーションでパフォーマンスのボトルネックを引き起こす場合があります。ただし、慎重な最適化手法を使用すると、コードの速度と応答性を大幅に向上させることができます。いくつかの重要な戦略を詳しく見てみましょう:

DOM 操作を最小限に抑える

バッチ 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 の変数宣言を理解する

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 における関数の最適化を理解する

関数の最適化は、効率的な 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 などの自動化ツールを使用する方がはるかに効率的かつ効果的です。
バンドル

複数のファイルを結合: バンドルでは、複数の JavaScript ファイルを 1 つの出力ファイルに結合します。これにより、アプリケーションの JavaScript コードをロードするために必要な HTTP リクエストの数が減り、パフォーマンスが向上します。

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 のメモリリークを理解する

メモリリークは、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 サイトの他の関連記事を参照してください。