高性能 JavaScript のためのイベント ループをマスターする

JavaScript のシングルスレッドの性質は、パフォーマンスが遅いことを意味するものではありません。イベント ループは、JS アプリを理解して最適化するための鍵となります。

イベントループ101

1. コールスタック: 同期コードを実行します
2. タスクキュー: コールバックを保持します (setTimeout、I/O)
3. マイクロタスクキュー: Promise、queueMicrotask()
4. イベント ループ: 実行を調整します

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Output: 1, 4, 3, 2

パフォーマンスの落とし穴

1. 長時間実行されるタスクがループをブロックする
2. 過剰な DOM 操作
3. 同期ネットワークリクエスト

最適化手法

1. よりクリーンな非同期コードのために async/await を使用する

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

1. 高コストの操作をデバウンスする

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
};

1. CPU を集中的に使用するタスクには Web ワーカーを使用する

const worker = new Worker('heavy-calculation.js');
worker.postMessage({data: complexData});
worker.onmessage = (event) => console.log(event.data);

1. 長いリストを仮想化する
2. スムーズなアニメーションには requestAnimationFrame を使用します
3. DOM のバッチ更新

パフォーマンスの測定

1. パフォーマンス API を使用する

performance.mark('start');
// Code to measure
performance.mark('end');
performance.measure('My operation', 'start', 'end');

1. Chrome DevTools の [パフォーマンス] タブ
2. ライトハウス監査

覚えておいてください: 最速のコードは、多くの場合、書かれていないコードです。賢く最適化します。

乾杯?

以上が高性能 JavaScript のためのイベント ループをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。