JavaScript のマイクロタスクとマクロタスクの説明

序文：

js はシングルスレッド言語なので、非同期にすることは不可能です。しかし、js のホスト環境 (ブラウザ、ノードなど) はマルチスレッドです。ホスト環境によって、js は何らかの方法で非同期特性 (イベント駆動) を持ちます。 js では、一般的にすべてのタスクを 2 つのカテゴリに分類します。1 つは同期タスク、もう 1 つは非同期タスクです。非同期タスクには、マイクロタスクとマクロタスクというさらに詳細な分類があります。

1. コンセプト

1.1 マクロタスク

マクロタスク ---- setTimeout 、 setInterval 、 DOMイベント、 AJAXリクエスト

JS 内部タスクとDOMタスクが順番に実行されるように、ブラウザは 1 つのtaskが完了した後、次のタスクが開始される前にページを再レンダリングします (task->render->task->…)

1.2 マイクロタスク

マイクロタスク ---- Promise 、 async / await

マイクロタスクは通常、一連のアクションに関するフィードバックの提供など、現在の同期タスクが完了した直後に実行する必要があるタスク、または新しいタスクを割り当てずに非同期で実行する必要があるタスクであり、パフォーマンスのオーバーヘッドを削減できます。

2. 実行順序

まずコードの一部を見て、実行順序について説明しましょう。

   コンソール.log(1)
    タイムアウトを設定する(() => {
      コンソール.log(2)
    })
    Promise.resolve().then(() => {
      コンソール.log(3)
    })
    コンソール.log(4)

上記のコードによって出力される結果は 1 4 3 2 です。上記のコードから、実行順序は次のようになることがわかります。

​ 最初に同期コードを実行します。非同期マクロタスクに遭遇すると、非同期マクロタスクをマクロタスクキューに入れます。非同期マイクロタスクに遭遇すると、非同期マイクロタスクをマイクロタスクリストに入れます。すべての同期コードが実行されると、非同期マイクロタスクをリストからメインスレッドに転送して実行します。非同期マイクロタスクの実行後、非同期マクロタスクをキューからメインスレッドに転送して実行します。すべてのタスクが実行されるまで、このサイクルが継続されます。

注:マイクロタスクはページのレンダリング前に実行されます。

3. タスク関係

マクロタスクが主流です。js js実行が開始されると、マクロタスクが開始されます。マクロタスクでは、命令が 1 つずつ実行されます。マクロタスクは同時に複数存在することもできますが、順番に 1 つずつ実行されます。

各マクロタスクの後にはマイクロタスク キューが続きます。マイクロタスク キューに命令またはメソッドがある場合は、それらが最初に実行されます。そうでない場合は、すべてのマクロ タスクが完了するまで、次のマクロ タスクの実行を開始します。

4. タスクの詳細

マクロタスクの後にもマイクロタスクが存在するのはなぜですか?これは、マクロタスクがパフォーマンスをあまりにも多く消費するためです。以前に準備されたいくつかのメソッドが必要で最後に実行され、新しいマクロタスクを追加したくない場合は、これらのメソッドを 1 つずつマイクロタスク キューに入れることができます。このマクロタスク内のコードが実行されると、マイクロタスク キューが実行されます。

したがって、現在の同期コードが実行され、非同期タスクに遭遇した場合、それが非同期マクロタスクであれば、次のラウンドのマクロタスクキューに配置され、非同期マイクロタスクであれば、マイクロタスクキューに配置され、現在のマクロタスクに続きます。マイクロタスクは、マクロタスクの小さな末尾に相当します。したがって、現在のマクロタスクが実行されると、その後ろで待機している非同期マイクロタスクは、継続実行のためにすぐにキューに入れられます。非同期マクロタスクは次のラウンドまで待機する必要があるため、非同期マイクロタスクがマクロタスクの前に実行されます。

JavaScriptマイクロタスクとマクロタスクに関するこの記事はこれで終わりです。JavaScript JavaScriptマイクロタスクとマクロタスクに関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。