高度な JavaScript: イベント ループの探索

導入

JavaScript は、Web 開発において強力で広く使用されているプログラミング言語です。最も興味深い点の 1 つは同時実行モデルです。これにより、シングルスレッドであるにもかかわらず複数のタスクを効率的に処理できます。イベント ループを理解することは、特に複雑なアプリケーションで、パフォーマンスが高くバグのない JavaScript コードを作成するために重要です。

JavaScript の同時実行モデルを理解する

シングルスレッドの性質

JavaScript はシングルスレッドです。つまり、コードは一度に 1 つの操作ずつ順番に実行されます。これは、複数のスレッドを同時に実行できるマルチスレッド言語とは対照的です。ただし、JavaScript はイベント駆動型のノンブロッキング アーキテクチャを使用して同時実行性を管理し、非同期タスクを効率的に処理します。

同時実行モデル

JavaScript は、イベント ループ に基づく同時実行モデルを使用し、ノンブロッキング操作を実行できます。このモデルは、ユーザー インターフェイスをフリーズさせることなく、I/O 操作、ネットワーク リクエスト、ユーザー インタラクションなどのタスクを処理するために不可欠です。

イベントループの説明

イベントループとは何ですか?

イベント ループは、コードの実行を調整し、イベントを処理し、非同期タスクを管理するために JavaScript が使用するメカニズムです。コール スタックを継続的にチェックして、実行する必要がある関数があるかどうかを確認し、スタックが空のときにコールバック キュー内のタスクを処理します。

イベントループのコンポーネント

1. コールスタック

呼び出しスタックは関数呼び出しを追跡します。関数は呼び出されるとスタックに追加され、完了すると削除されます。

例：

function greet() {
  console.log('Hello');
}

function sayGoodbye() {
  console.log('Goodbye');
}

greet();
sayGoodbye();

• greet() が呼び出され、スタックに追加されます。
• console.log("Hello") が実行されます。
• greet() がスタックから削除されます。
• SayGoodbye() が呼び出され、スタックに追加されます。
• console.log("Goodbye") が実行されます。
• SayGoodbye() がスタックから削除されます。

2. Web API

Web API はブラウザ (または Node.js) によって提供され、setTimeout、DOM イベント、フェッチなどの機能が含まれています。これらは、メインの実行スレッドの外側でタスクを実行するために使用されます。

例：

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');

• console.log("Start") が実行され、すぐにログに記録されます。
• setTimeout が呼び出され、そのコールバックが Web API 環境に送信されます。
• console.log("End") が実行され、すぐにログに記録されます。
• 1 秒後、setTimeout からのコールバックがコールバック キューにプッシュされます。
• コール スタックが空になると、イベント ループがコールバックをスタックにプッシュし、console.log("Timeout") が実行されます。

3. コールバックキュー（タスクキュー）

コールバック キューは、処理されるコールバックを含むメッセージを保持します。イベント ループはキューからタスクを取得し、スタックが空のときに実行するために呼び出しスタックにタスクを追加します。

4. マイクロタスクキュー

マイクロタスク キューは、現在の操作が完了した直後に実行する必要があるタスクに使用されます。 Promise と Mutation Observer はここで処理されます。

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

• console.log("Start") が実行され、ログに記録されます。
• setTimeout コールバックは遅延ゼロでコールバック キューに送信されます。
• Promise が解決され、そのコールバックがマイクロタスク キューに追加されます。
• console.log("End") が実行され、ログに記録されます。
• イベント ループはマイクロタスク キューを処理し、console.log("Promise") を記録します。
• コールバック キューが処理され、console.log("Timeout") が記録されます。

以上が高度な JavaScript: イベント ループの探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。