ブラウザのイベントループ-jsチュートリアル-php.cn

ブラウザのイベントループ

hzc

リリース： 2020-06-12 11:02:55

転載

1699 人が閲覧しました

序文

ブラウザイベントループについては、ほとんどの基本的なインタビューで尋ねられます。この記事では、この知識ポイントについて説明します。

イベントループメカニズム

イベントループは、コードの実行、イベントの収集と処理、キュー内のサブタスクの実行を担う一連のメカニズムです。

イベントループメカニズムでは、使用されるスタックデータ構造は実行コンテキストスタックです。関数が呼び出されるたびに、対応する実行コンテキストが作成されてスタックにプッシュされます。ヒープデータ構造が使用されます。主に、オブジェクトを格納するためのほとんど構造化されていないメモリ領域を表すために使用されます。使用されるキューデータ構造は、主に非同期タスクを格納するために使用されるタスクキューです。以下に示すように:

ブラウザのイベントループ

実行コンテキストスタック

JavaScript コードが実行されると、さまざまな実行環境に入ります。 , 実行が開始されると、最初にグローバル環境に入ります。このとき、グローバルコンテキストが最初に作成され、スタックにプッシュされます。次に、関数が呼び出されるときに、対応する関数環境に入ります。このとき、対応する関数コンテキストはスタック上にある場合、最上位の実行コンテキストコードが実行された後、スタックからポップされます。ここでいうスタックとは実行コンテキストのことです。

タスクキュー

イベントループ機構には複数のタスクキューがあり、マクロタスクキューとマイクロタスクキューに分かれています。

マクロタスク

マクロタスクには、setTimeout、setInterval、I/O、UI レンダリングが含まれます。

マイクロタスク

マイクロタスクには、Promise、Object.observe (廃止)、および MutationObserver (html5 の新機能) が含まれます。

イベントループメカニズムのプロセス

1. メインスレッドは JavaScript コード全体を実行して、実行コンテキストスタックを形成します。さまざまなタスクソースが発生すると、指定された非同期タスクは一時停止されます。応答結果を受信した後、非同期タスクは、実行コンテキストスタックにグローバルコンテキストだけが残るまで、対応するタスクキューに配置されます。

2. すべてのタスクをキューに入れます。マイクロタスクキュー優先度に応じて単一のタスクキュー内の非同期タスクがスタックにプッシュされ、すべてのマイクロタスクキューがクリアされるまで先入れ先出し方式で実行されます;

3. タスクを配置します。マクロタスクキュー内で最も優先度の高いタスクキューに配置されます。非同期タスクはスタックにプッシュされ、先入れ先出し方式で実行されます。

4. すべてのマクロが終了するまで、手順 2 と 3 を繰り返します。タスクキューとマイクロタスクキューがクリアされ、グローバルコンテキストがスタックからポップされます。

イベントループメカニズムのプロセスを簡単に言うと、メインスレッドが JavaScript コード全体を実行した後、遭遇した各タスクソースによって指定されたタスクを各タスクキューに分散し、次にマイクロスレッドに分散します。 -タスクキューとマクロタスクキューを交互にスタックにプッシュし、すべてのタスクキューがクリアされ、グローバルコンテキストがスタックからポップアウトされるまで実行します。

最後に

#Node.js にもイベントループがありますが、ブラウザのイベントループとはまったく異なります。 Node.js は、JS 解析エンジンとして V8 を使用し、I/O 処理に独自に設計された libuv を使用します。libuv は、さまざまなオペレーティングシステムの基礎となる機能の一部をカプセル化し、統合された API を提供するイベント駆動型のクロスプラットフォーム抽象化レイヤーです。外の世界にはイベントループ機構も実装されています。ここでは詳細には触れませんが、さらに詳しく知りたい場合は、ドキュメントを自分で読んでください。＃＃＃＃＃＃読んでくれてありがとう！

WeChat でコミュニケーションする必要がある場合は、メッセージを残してください。

推奨チュートリアル: 「

JS チュートリアル

」

以上がブラウザのイベントループの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。