ブラウザでのjsのイベントループイベントキューの詳細な説明

序文

以下の内容はブラウザ上でのjsのイベントキュー実行であり、nodejsでのそれとは異なりますので、ご注意ください。

js はシングルスレッドと言われますが、実際にはシングルスレッドではありません。ただし、ブラウザで実行される場合は、実行用に 1 つのスレッドのみが割り当てられます。

したがって、js の実行はシングルスレッドであり、一度に 1 つのタスクしか実行できません。つまり、一度に 1 つのタスクが実行され、1 つのタスクが完了した後に次のタスクが実行されます。

スタックと2つのキューを理解する

呼び出しスタックスタック。

マクロキュー、マクロタスク (タスクとも呼ばれます)。

マイクロキュー、マイクロタスク、ジョブとも呼ばれます。

実行プロセス

js はグローバルスクリプト同期コードを実行します。このプロセス中に非同期タスクが発生した場合は、まず対応するキューに追加されます。

これが完了すると、呼び出しスタックは空になります。

次に、キューの最初のタスク (最初はマイクロキュー、次にマクロキュー) が、キュー内のすべてのタスクが完了するまで 1 つずつ、実行するためにコールスタックに移動されます。

要約すると、最初に同期タスクを実行し、次にマイクロキュータスクを実行し、最後にマクロキュータスクを実行します。

非同期タスクを割り当てる方法

これらの非同期タスクには、以下のものが含まれますが、これらに限定されません。

マクロキューには次のものが割り当てられます。

タイムアウトの設定
間隔の設定
リクエストアニメーションフレーム
入出力
UIレンダリング

マイクロキューには次のものが割り当てられます。

約束
オブジェクト.観察
ミューテーションオブザーバー

一般的なマクロキュー: setTimeout、一般的なマイクロキュー: Promise。

簡単な例

    console.log("同期タスク1");

    タイムアウトを設定する(() => {
      console.log("マクロタスク");
    });

    新しい Promise((resolve, 拒否) => {
      console.log("同期タスク2");
      解決("マイクロタスク");
    }).then((データ) => {
      コンソールにログ出力します。
    });

    console.log("同期タスク3");

結果は次のようになります (番号でタスクを追加し、矢印で実行します)。

コールバックが実行される前に、Promise の最初のレイヤーが同期されていることに注意してください。これは、上記の同期タスク 2 です。

より難しい例

    console.log("同期タスク1");

    console.log("同期タスク2");

    新しい Promise((resolve, 拒否) => {
      console.log("同期タスク3");
      タイムアウトを設定する(() => {
        console.log("マクロタスク1");
        Promise.resolve()
          .then(() => {
            console.log("マイクロタスク 5");
          })
          .then(() => {
            console.log("マイクロタスク 6");
          });
      });
      解決します("マイクロタスク 1");
    })
      .then((データ) => {
        コンソールにログ出力します。
        「マイクロタスク 3」を返します。
      })
      .then((データ) => {
        コンソールにログ出力します。
      });

    タイムアウトを設定する(() => {
      console.log("マクロタスク2");
    }, 0);

    新しい Promise((resolve, 拒否) => {
      解決します("マイクロタスク 2");
    })
      .then((データ、解決) => {
        コンソールにログ出力します。
        「マイクロタスク 4」を返します。
      })
      .then((データ) => {
        コンソールにログ出力します。
      });

    console.log("同期タスク4");

どのように表示するか? まず最初のレイヤーを見てください。赤は同期、緑はマイクロタスク、青はマクロタスクを表します。

同期タスクを完了すると、2 つのマイクロタスクと 2 つのマクロタスクがあることがわかります。

元の実行順序は次のようになります (ここではシリアル番号に従って順序を表現しています。単純な例と区別してください)。

しかし、それはそれほどスムーズではなく、6番になると状況は変わりました。

マイクロタスクの実行中に新しいマイクロタスクが生成される可能性があるためです。

上記のマイクロタスク 1 の実行後、マイクロタスク 2 の後にマイクロタスク 3 が追加されます。つまり、マイクロタスク 2 の実行後はマクロタスクの順番にはなりません。マイクロタスクキューが一時的に空になるまで、新しいマイクロタスクが実行され続けます。

したがって、4 つのマイクロタスクはキューに追加された順序で実行されます。この時点で、新しいマイクロタスクが生成されない場合は、マクロタスクが実行されます。

ただし、上記を5番まで実行すると状況が異なります。マクロタスクの実行後、新しいマイクロタスクが生成されます。そのため、2つのマクロタスクはスムーズに連続して実行されるのではなく、挿入されたマイクロタスクによってブロックされます。

(マイクロタスクキューとマクロタスクキューの両方が存在する場合、マクロタスクの実行によってマイクロタスクが生成されたとしても、マクロタスクの前にマイクロタスクを実行する必要があることに注意してください。)

したがって、最終的な答えがわからない場合は、上記を注意深く確認してください。

要約する

ブラウザの js イベントループイベントキューに関するこの記事はこれで終わりです。より関連性の高い js イベントループイベントキューのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: