パフォーマンスを向上させるための roven JavaScript 最適化テクニック-jsチュートリアル-php.cn

roven JavaScript Optimization Techniques to Boost Performance

ベストセラー作家として、アマゾンで私の本を探索することをお勧めします。 Medium で私をフォローしてサポートを示すことを忘れないでください。ありがとう！あなたのサポートは世界を意味します！

JavaScript の最適化は、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させるために非常に重要です。私はプロジェクトでコードの実行速度を向上させるためにさまざまなテクニックを実装してきました。私が特に便利だと感じた 6 つの効果的な方法を以下に示します:

メモ化は、高価な関数の結果をキャッシュするために私がよく使用する強力なテクニックです。コストのかかる操作の出力を保存することで、冗長な計算を回避し、パフォーマンスを大幅に向上させることができます。これはメモ化を実装する方法の例です:

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

ログイン後にコピー

この例では、メモ化された関数への最初の呼び出しには時間がかかりますが、同じ引数を使用した後続の呼び出しは、結果がキャッシュから取得されるため、はるかに高速になります。

デバウンスとスロットリングは、特にパフォーマンスを重視する操作において、関数の実行速度を制御するために使用するテクニックです。デバウンスでは、関数が最後の呼び出しから一定の時間が経過した後にのみ呼び出されることを保証します。一方、スロットルでは、特定の期間内に関数を呼び出せる回数を制限します。

デバウンスを実装する方法は次のとおりです。

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

ログイン後にコピー

スロットルの例を次に示します:

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const scrollHandler = () => {
  console.log('Handling scroll event...');
};

const throttledScrollHandler = throttle(scrollHandler, 100);

window.addEventListener('scroll', throttledScrollHandler);

ログイン後にコピー

これらのテクニックは、過剰な関数呼び出しがパフォーマンスの問題を引き起こす可能性があるスクロールやサイズ変更などのイベントを処理する場合に特に役立ちます。

オブジェクトや配列を作成する場合、私は常にコンストラクターの代わりにリテラル表記を使用することを好みます。このアプローチは、より簡潔であるだけでなく、実行の点でも高速です。比較は次のとおりです:

// Slower
const obj1 = new Object();
obj1.name = 'John';
obj1.age = 30;

const arr1 = new Array();
arr1.push(1, 2, 3);

// Faster
const obj2 = { name: 'John', age: 30 };
const arr2 = [1, 2, 3];

ログイン後にコピー

リテラル表記は 1 回の操作でオブジェクトまたは配列を作成するため、より効率的です。一方、コンストラクターによるアプローチでは複数の手順が必要です。

グローバル変数は、検索時間が増加するため、パフォーマンスに大きな影響を与える可能性があります。コード内での使用を最小限に抑えるよう意識的に努力しています。代わりに、関数またはモジュール内に変数をカプセル化して、実行速度を向上させます。以下は、グローバル変数を回避するためにコードをリファクタリングする方法の例です:

// Avoid this
let counter = 0;
function incrementCounter() {
  counter++;
  console.log(counter);
}

// Prefer this
function createCounter() {
  let counter = 0;
  return function() {
    counter++;
    console.log(counter);
  };
}

const incrementCounter = createCounter();
incrementCounter();
incrementCounter();

ログイン後にコピー

クロージャを使用すると、グローバル変数に依存せずに状態を維持できるため、より高速で予測可能なコード実行が可能になります。

ループの最適化は、パフォーマンスを向上させるために私が重点を置いているもう 1 つの領域です。私は配列には for...of ループを、オブジェクトには for...in ループを使用することを好みます。これらの構造は通常、従来の for ループよりも高速で読みやすいです。さらに、中間配列が作成され、パフォーマンスに影響を与える可能性があるため、不必要な配列メソッドの連鎖は避けるようにしています。最適化されたループの使用例を次に示します:

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

ログイン後にコピー

関数内の変数にアクセスする場合、オブジェクトのプロパティの代わりにローカル変数を使用すると、実行が高速化されることがわかりました。これは、ローカル変数の検索は一般にオブジェクトのプロパティの検索よりも高速であるためです。この手法を使用してコードを最適化する方法の例を次に示します。

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

ログイン後にコピー

この例では、オブジェクトのプロパティをローカル変数にキャッシュすることで、特にループや頻繁に呼び出される関数での実行の高速化につながります。

これらの最適化手法により、JavaScript アプリケーションのパフォーマンスが大幅に向上しました。ただし、時期尚早に最適化を行うとコードが過度に複雑になる可能性があることに注意することが重要です。これらの手法を適用する前に、アプリケーションの実際のボトルネックに対処していることを確認するために、プロファイリングとパフォーマンスの測定を常にお勧めします。

これらの中核となる最適化テクニックに加えて、JavaScript の実行の高速化に貢献する他の実践方法もいくつか見つけました。

厳密モードを使用する: スクリプトまたは関数の先頭に「use strict」を追加すると、エラーを早期に検出し、エラーが発生しやすい特定の機能の使用を防ぐことができ、パフォーマンスが向上する可能性があります。
不必要な DOM 操作を避ける: 直接的な DOM 対話を最小限に抑え、DOM 更新をバッチ処理すると、特に複雑な Web アプリケーションでパフォーマンスが大幅に向上します。
Web ワーカーの活用: DOM アクセスを必要としない計算集約型タスクの場合、Web ワーカーは処理をバックグラウンドスレッドにオフロードして、メインスレッドの応答性を維持できます。
関数パラメーターの最適化: 関数で 'this' キーワードが使用されていない場合は、パフォーマンスをわずかに向上させるためにアロー関数の使用を検討してください。
適切なデータ構造を使用する: 適切なデータ構造 (例: 一意の値には Set、キーと値のペアには Map) を選択すると、アルゴリズムがより効率的になり、パフォーマンスが向上します。
ブラウザのキャッシュを活用する: キャッシュヘッダーを適切に構成すると、サーバーの負荷が軽減され、リピーターに対するアプリケーションの応答性が向上します。
JavaScript ファイルのサイズを最小化する: 縮小および圧縮技術を使用して JavaScript ファイルのサイズを削減し、ダウンロードと解析の時間を短縮します。
不要な関数呼び出しを回避する: コードをリファクタリングして、特にループ内や頻繁に実行されるコードパス内での冗長な関数呼び出しを排除します。
文字列の連結にテンプレートリテラルを使用する: 多くの場合、テンプレートリテラルは、従来の文字列連結方法よりも効率的です。
最新の JavaScript 機能を活用する: 構造化、スプレッド演算子、オプションのチェーンなどの機能を利用して、より簡潔で高速なコードを実現します。

これらの追加の最適化手法のいくつかを組み合わせた例を次に示します。

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

ログイン後にコピー

この例では、厳密モードを使用し、適切なデータ構造 (Set と Map) を活用し、アロー関数で関数パラメーターを最適化し、文字列連結にテンプレートリテラルを使用し、構造化などの最新の JavaScript 機能の使用を示しています。また、負荷の高い計算をオフロードするために Web ワーカーをセットアップする方法も示します。

効果的な最適化の鍵は、パフォーマンスを最も大幅に向上させる領域に焦点を当てることであることを覚えておいてください。最適化手法を適用する前に、必ずコードのプロファイリングを行い、実際のボトルネックを特定してください。多くの場合、わずかなメリットしか得られない微細な最適化よりも、クリーンで読みやすいコードを書くことの方が重要です。

JavaScript コードの最適化に取り組み続けるときは、JavaScript エンジンとブラウザの実装が常に進化していることに留意してください。現在は最適化であるかもしれないが、将来的には不必要になったり、逆効果になる可能性さえあります。最新のベストプラクティスを常に最新の状態に保ち、現実のシナリオで最適化を常にテストしてください。

最後に、知覚されるパフォーマンスの重要性を忘れないでください。これらの手法は実際の実行速度に焦点を当てていますが、プログレッシブ読み込み、スケルトン画面、楽観的な UI 更新などの要素により、アプリケーションの速度と応答性に対するユーザーの認識を大幅に向上させることができます。

これらの最適化手法を一貫して適用し、開発プロセス全体を通じてパフォーマンスに留意することで、優れたユーザーエクスペリエンスを提供する、より高速で効率的な JavaScript アプリケーションを作成できます。

101冊

101 Books は、著者 Aarav Joshi が共同設立した AI 主導の出版社です。高度な AI テクノロジーを活用することで、出版コストを信じられないほど低く抑えており、書籍によっては $4 という低価格で販売されており、誰もが質の高い知識にアクセスできるようにしています。

Amazon で入手できる私たちの書籍 Golang Clean Code をチェックしてください。

最新情報とエキサイティングなニュースにご期待ください。本を購入する際は、Aarav Joshi を検索して、さらに多くのタイトルを見つけてください。提供されたリンクを使用して特別割引をお楽しみください!