Js | Event Loop 宏任务&微任务
js任务共分为两种:宏任务(macro-task)和微任务(micro-task)
- 宏任务:包括整体代码script,setTimeout,setInterval
- 微任务:Promise.then(非new Promise),process.nextTick(node中)
事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务。
同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。
setTimeout(() => {
console.log('延时1秒');
},1000)
console.log("开始")
setTimeout函数是宏任务,且是异步任务,因此会将函数放入Event Table并注册函数,经过指定时间后,把要执行的任务加入到Event Queue中,等待同步任务console.log(“开始”)执行结束后,读取Event Queue中setTimeout的回调函数执行。
再看一个包含微任务的:
setTimeout(function() {
console.log('setTimeout');
},1000)
new Promise(function(resolve) {
console.log('promise');
resolve();
}).then((data) => {
console.log('resolved');
},(err) => {
console.log('rejected');
}
)
console.log('console');
- 首先setTimeout,放入Event Table中,1秒后将回调函数放入宏任务的Event Queue中
- new Promise同步代码,立即执行console.log(‘promise’),然后看到微任务then,因此将其放入微任务的Event Queue中接下来执行同步代码console.log(‘console’)
- 主线程的宏任务,已经执行完毕,接下来要执行微任务,因此会执行Promise.then,到此,第一轮事件循环执行完毕
- 第二轮事件循环开始,先执行宏任务,即setTimeout的回调函数,然后查找是否有微任务,没有,时间循环结束
整一个过程可以知道查看文章:《Tasks, microtasks, queues and schedules》
分析过程:
事件循环,先执行宏任务,其中同步任务立即执行,异步任务,加载到对应的的Event Queue中(setTimeout等加入宏任务的Event Queue,Promise.then加入微任务的Event Queue),所有同步宏任务执行完毕后,如果发现微任务的Event Queue中有未执行的任务,会先执行其中的任务,这样算是完成了一次事件循环。接下来查看宏任务的Event Queue中是否有未执行的任务,有的话,就开始第二轮事件循环,依此类推。
下面来一个:
<div class="outer">
<div class="inner">点击</div>
</div>
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');
new MutationObserver(function() {
console.log('mutate');
}).observe(outer, {
attributes: true
});
function onClick() {
console.log('click');
setTimeout(function() {
console.log('timeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise');
});
outer.setAttribute('data-random', Math.random());
}
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);
点击一下:
详细过程请看《Tasks, microtasks, queues and schedules》
总结:
- 宏任务按顺序执行,且浏览器在每个宏任务之间渲染页面
- 所有微任务也按顺序执行,且在以下场景会立即执行所有微任务
- 每个回调之后且js执行栈中为空。
- 每个宏任务结束后。
参考文章:
https://juejin.im/post/59e85eebf265da430d571f89
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly