JavaScriptイベントループの強制ソート-jsチュートリアル-php.cn

JavaScriptイベントループの強制ソート

巴扎黑

リリース： 2017-07-19 15:42:49

オリジナル

1597 人が閲覧しました

js シングルスレッド

js はシングルスレッドであり、ユーザーの操作や DOM 操作に役立ちます。プロセスとスレッドの詳細については、ポータルをクリックしてください。Webworker はマルチスレッドを実現できます。ウェブワーカーによって作成されたスレッドは、メインスレッドによって制御され、

js 同期、

同期実行: つまり、js メインスレッドはタスクを順番に実行し、待機します。 WebAPI/ajax およびその他のコードを操作するときの応答次のコードは実行できません。つまり、次のタスクは前のタスクが完了するまで待機する必要があります。

非同期実行: js はシングルスレッドであり、非同期機能がありません。ブラウザは、js が実行されると、WebAPI (setTimeout/ajax など) に遭遇し、すぐに値を返すため、メインスレッドをブロックせず、完了後にブラウザによって実際の非同期が実行されます。コールバック関数は、js メインスレッドのメッセージキューにプッシュされ、メインスレッドが呼び出すのを待ちます。

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

js が実行されると、そのメインスレッドには実行スタック [個人的にコールと呼ばれます] が存在します。スタック] (スタック) とメッセージキュー [タスクキューまたはイベントキューとも呼ばれます] (イベントキュー); js が関数に遭遇すると、その関数はスタックにプッシュされ、関数の実行後にポップアウトされます。実行スタックを呼び出して実行します。WebAPI が見つかった場合は非同期で実行され、実行スタックにタスクがない場合は、メインスレッドがメッセージをクエリします。クエリが成功すると、クエリされたタスクが実行されます。実行スタックが空になるまで実行のためにスタックにプッシュされ、メッセージキューが再度クエリされます。これは有名なイベントループ [イベントループ] であり、非同期実行はブラウザによって簡単に完了します。 js スレッドがブロックされているときに DOM イベントを操作すると、スレッドが復元された後に順番に実行される理由を理解するには、[js メインスレッドのタスクキューがブラウザによってプッシュされ、js スレッドがブロックされます。ブロックされている、つまりメインスレッドはタスクキューにタスクをプッシュすることを妨げません。

別のコード:

　　　　　　// 主线程执行fn1任务  1function fn1(){ 
                console.log("任务1执行")// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理 2  // 浏览器收到后 0 毫秒将回调函数推入消息列队; 异步执行setTimeout(function(){// 查询到一个回调任务 入栈执行    5console.log("回调1执行")// 遇到webAPI立即返回 这里是undefined值 并交给浏览器对应线程处理  6  // 浏览器收到后 500   毫秒将回调函数推入消息列队; 异步执行setTimeout(function(){// 查询到一个回调任务 入栈执行    7console.log("回调2执行")
                    },500)
                },0)
            }// 主线程执行fn2任务 3function fn2(){console.log("任务2执行")}// 执行栈没有可执行任务 开始查询消息列队 4

ログイン後にコピー

マクロタスクとマイクロタスク

2 つのタイプ、つまり Macrotasks[Task Queue] と Microtasks[Microtasks Queue ]

macrotasks: setTimeout、setInterval、setImmediate >、I/O、UI レンダリングsetTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks: process.nextTick, Promises, Object.MutationObserver

マイクロタスク

: process.nextTick、Promises、Object.MutationObserver<strong></strong>

これは、2 つのうちのどちらを最初に実行する必要があるかという問題を引き起こします。

Promise/A+ 仕様には次のように記載されています:

ここでの「プラットフォームコード」とは、エンジン、環境、および Promise の実装コードを意味します。実際には、この要件により、then が呼び出されるイベントループの後に onFulfilled と onRejected が非同期で実行されることが保証されます。これは、setTimeout や setImmediate などの「マクロタスク」メカニズム、または MutationObserver や process.nextTick などの「マイクロタスク」メカニズムを使用して実装できます。プラットフォームコードと見なされると、それ自体にハンドラーが呼び出されるタスクスケジューリングキューまたは「トランポリン」が含まれる場合があります。実際、メッセージキューをクエリするときの実行プロセスも理解しやすくなります。前のクエリに基づいて、microtasks はすべてのタスクが実行された後に最初にクエリされます。macrotasks に microtasks タスクがある場合でも、次のクエリが最初に実行されます。 上記のコード [Promise 機能は es6 なのでノード環境を使用してください]
console.log(170 Promise(89100 Promise(34562); // 1 2 3 4 5 6 7 8 9 10
ログイン後にコピー
上記コードの実行処理:

js はコンソール 1 を実行します。 setTimeout に遭遇すると非同期実行に変更され、再度 setTimeout に遭遇すると再び非同期で実行され、その後、実行が Promise に遭遇すると、それが実行されます。 microtasks タイプのタスクキューにプッシュされ、コンソール 2 が実行されます。この時点で、実行スタックは空です。メッセージキューをクエリするには、まず microtasks をクエリして、実行可能なタスクがあることを確認します。実行のためにスタックにプッシュされ、それに応じて 3 4 5 6 が出力されます [マイクロタスクが空でないことが判明する限り、空になるまで実行されます]; メッセージキューを再度クエリします。現時点では、microtasks キューには実行するタスクがありません。次に、macrotasks キューをクエリして、実行を待機している setTimeout コールバックを見つけて、実行のためにスタックにプッシュし、キューを再度クエリします。この時点では、microtasks キューにはまだタスクがありません。次に、macrotasks キューをクエリして、実行を待機している setTimeou コールバックを見つけます。promise が microtasks キューにプッシュされていることを確認します。スタックに戻ると、実行スタックは再び空になります。メッセージキューをクエリして、microtasks に実行可能なタスクがあることを確認します。この時点で、メインスレッドは待機状態になります。

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