Event Loop
Event Loop 是一个程序结构,用于等待和发送消息和事件。
Event Loop 执行顺序如下所示:
- 首先执行同步代码(宏任务)
- 当执行完所有同步代码后,调用栈为空,查询是否有异步代码(消息队列)需要执行
- 执行所有微任务
- 当执行完所有微任务后,如有必要会渲染页面
- 然后开始下一轮 Event Loop,执行宏任务中的异步代码,也就是
setTimeout
中的回调函数
宏任务
script
、setTimeout
、setInterval
、setImmediate
(浏览器暂时不支持,只有IE10支持)、I/O
、UI Rendering
。
微任务
Process.nextTick(node)
、Promise
、MutationObserver
调用栈
JavaScript
执行过程中会产生执行栈,如果调用栈执行到新的宏任务时,会将宏任务里面的代码会添加到当前的消息队列里面。如果调用栈执行到微任务时,会将微任务添加到微任务队列中。
消息队列
存放异步消息的地方,当调用栈为空时,会取队首消息继续执行。
微任务队列
微任务会在调用栈被清空的时候,在下次消息执行之前立即执行,并且在处理微任务的时候新加入的微任务也会被一起执行。
举个例子:
// 调用环境即script
setTimeout(function () {
console.log("set1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2 ");
});
});
new Promise(function (resolve) {
console.log("pr1");
resolve();
}).then(function () {
console.log("then1");
});
setTimeout(function () {
console.log("set2");
});
console.log(2);
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
- 调用栈执行到
setTimeout
,将setTimeout
内容放到消息队列中; - 执行到16行
promise
,_打印pr1
,执行resolve()
,然后将then
中的内容放到微任务队列中; - 执行到23行,将
setTimeout
放入到消息队列中,排在第2行setTimeout
后面; - 执行到27行,_打印
2
; - 执行29行
promise
,将then
中的内容放进微任务队列中; - 此时当前任务的调用栈已经为空,所以顺序执行微任务队列,即第2步中,_打印
then1,then3
_ - 此时微任务也执行完毕,会从消息队列里取出下一个宏任务,即是第1步中
setTimeout
,_打印set1
,然后执行promise
,将then
放进微任务队列中; - 此时第二轮调用栈也执行完毕,会执行微任务队列中的任务,然后执行
promise
,执行到then
会将代码又放进微任务队列中,即_打印then2
,微任务队列中还有任务会继续执行,_打印then4
; - 最后执行到消息队列中的剩下的任务,即23行
setTimeout
,_打印set2
即最后打印结果为
pr1、2、then1、then3、set1、then2、then4、set2
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。