JavaScriptブラウザのイベントループの仕組みを詳しく解説-jsチュートリアル-php.cn

JavaScriptブラウザのイベントループの仕組みを詳しく解説

不言

リリース： 2018-10-20 16:15:39

転載

2465 人が閲覧しました

この記事では、JavaScript ブラウザーのイベントループの仕組みについて詳しく説明します。必要な方は参考にしていただければ幸いです。

前に投げかけられた質問:

単一スレッドを非同期にするにはどうすればよいですか?

イベントループのプロセスとは何ですか?

マクロタスクとマイクロタスクとその違いは何ですか?

シングルスレッドと非同期

js というと、シングルスレッドと非同期を思い浮かべるでしょう。非同期では、シングルスレッドはどのようにして非同期を実現するのでしょうか?まず概念として、まずシングルスレッドと非同期の関係を理解する必要があります。

JS のタスクは同期と非同期の 2 種類に分かれており、同期タスクは直接メインスレッドで実行されますが、非同期タスクはタスクキューに入れられます。複数のタスク (非同期タスク) をキューに入れて待機する必要があります。タスクキューはバッファーのようなもので、タスクは次のステップで呼び出しスタック (呼び出しスタック) に移動され、その後メインスレッドに移動されます。コールスタックのタスクを実行します。

シングルスレッドとは、JS コードの解析と実行を担当するスレッド (メインスレッド) が JS エンジン内に 1 つだけあることを意味します。つまり、一度に 1 つのことしか実行できません。 ajax リクエストの場合、メインスレッドはその応答を待機し、同時に他の処理を実行します。応答が返された後、そのコールバック関数がイベントテーブルに追加されます。タスクキューに保存され、実行が待機されます。スレッドのブロックは発生しないため、js による ajax リクエストの処理方法は非同期です。

つまり、呼び出しスタックが空かどうかを確認し、呼び出しスタックに追加するタスクを決定するプロセスがイベントループであり、js の非同期実装の中心となるのはイベントループです。

コールスタックとタスクキュー

名前が示すように、コールスタックはスタック構造であり、関数呼び出しはスタックフレームを形成します。これには、パラメータやローカル変数などのコンテキスト情報が含まれます。現在実行されている関数。関数が実行されると、その実行コンテキストがスタックからポップされます。

次の図は、コールスタックとタスクキューの関係を示しています

JavaScriptブラウザのイベントループの仕組みを詳しく解説

イベントループ

概要イベントループ、HTML 仕様の概要

ユーザーエージェントごとに少なくとも 1 つのイベントループが必要です。関連する類似起源のブラウジングコンテキストの単位ごとに 1 つのイベントループ。
イベントループには 1 つ以上のタスクキューがあります。
各タスクは、特定のタスクソースからのものとして定義されます。

仕様では、ブラウザには少なくとも 1 つのイベントループがあり、各イベントループには少なくとも 1 つのタスクキュー (マクロタスク) があり、各外部タスクには独自のグループがあり、ブラウザは異なるタスクグループに優先順位を設定します。

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

仕様には 2 つの概念が記載されていますが、詳細は紹介されていません。いくつかの情報を参照すると、次のように要約できます。全体を実行する JS コード、イベントコールバック、XHR コールバック、タイマー (setTimeout/setInterval/setImmediate)、IO 操作、UI render

microtask: Promise コールバック、MutationObserver、プロセスを含む、アプリケーションのステータスを更新するタスク。 nextTick、Object.observe

このうち、setImmediateとprocess.nextTickはnodejsの実装であり、nodejsの記事で詳しく紹介します。

イベント処理プロセス

マクロタスクとマイクロタスクの理解については、このようにイベントループの仕組みを組み合わせるとより明確になります。次の写真は非常にわかりやすい紹介です。

JavaScriptブラウザのイベントループの仕組みを詳しく解説
要約すると、イベントループのステップは次のとおりです。

1. マクロタスクキューが空かどうかを確認します。空でない場合は、空の場合は 2 に進みます。空の場合は 3

2 に進みます。マイクロタスクキューが空かどうかを引き続き確認し、空の場合は 4 に進みます。 5

4. マイクロタスク内のタスクを取り出し、Complete を実行し、ステップ 3
5. ビューの更新を実行します。

mactotask と microtask の実行シーケンス

無味乾燥な言葉をたくさん読んだ後は、概念を紹介するために、コードの一部を見て雰囲気をつかんでみてはいかがでしょうか

console.log(&#39;start&#39;)
setTimeout(function() {
console.log(&#39;setTimeout&#39;)
}, 0)
Promise.resolve().then(function() {
console.log(&#39;promise1&#39;)
}).then(function() {
console.log(&#39;promise2&#39;)
})
console.log(&#39;end&#39;)

ログイン後にコピー

print によって出力されるログシーケンスは何ですか?駅？上記のステップの分析に基づくと、これはとても簡単ですか~ JavaScriptブラウザのイベントループの仕組みを詳しく解説

#まず、グローバルコード (main()) が実行のためにコールスタックにプッシュされ、 start が出力されます。

次に、setTimeout がマクロタスクキューにプッシュされ、promise.then コールバックがマイクロタスクキューに置かれ、最後に console.log('end') が実行されて end が出力されます。 JavaScriptブラウザのイベントループの仕組みを詳しく解説 #この時点で、コールスタック内のコードが実行されています。マクロタスクの定義を振り返ると、マクロタスクが実行された後の次のステップはタスクを実行することです。マイクロタスクキューのpromiseコールバックを実行し、promise1を出力します。

promise回调函数默认返回undefined，promise状态变为fullfill触发接下来的then回调，继续压入microtask队列，event loop会把当前的microtask队列一直执行完，此时执行第二个promise.then回调打印出promise2；

这时microtask队列已经为空，从上面的流程图可以知道，接下来主线程会去做一些UI渲染工作（不一定会做），然后开始下一轮event loop，执行setTimeout的回调，打印出setTimeout；

这个过程会不断重复，也就是所谓的事件循环。

视图渲染的时机

回顾上面的事件循环示意图，update rendering（视图渲染）发生在本轮事件循环的microtask队列被执行完之后，也就是说执行任务的耗时会影响视图渲染的时机。通常浏览器以每秒60帧（60fps）的速率刷新页面，据说这个帧率最适合人眼交互，大概16.7ms渲染一帧，所以如果要让用户觉得顺畅，单个macrotask及它相关的所有microtask最好能在16.7ms内完成。

但也不是每轮事件循环都会执行视图更新，浏览器有自己的优化策略，例如把几次的视图更新累积到一起重绘，重绘之前会通知requestAnimationFrame执行回调函数，也就是说requestAnimationFrame回调的执行时机是在一次或多次事件循环的UI render阶段。

以下代码可以验证

setTimeout(function() {console.log(&#39;timer1&#39;)}, 0)
requestAnimationFrame(function(){
	console.log(&#39;requestAnimationFrame&#39;)
	})
	setTimeout(function() {console.log(&#39;timer2&#39;)}, 0)
	new Promise(function executor(resolve) {
	console.log(&#39;promise 1&#39;)
	resolve()
	console.log(&#39;promise 2&#39;)
	}).then(function() {
	console.log(&#39;promise then&#39;)
	})
	console.log(&#39;end&#39;)

ログイン後にコピー

JavaScriptブラウザのイベントループの仕組みを詳しく解説