浏览器event loop事件轮询

Posted 2021-03-29 你滴吴亦几

javascript是一门非阻塞单线程语言，那么以下代码执行顺序是怎么样的？

 async function async1() {  console.log('async1 start')  await async2()  console.log('async1 end') } async function async2() { console.log('async2') } console.log('script start') setTimeout(function() { console.log('setTimeout') }, 0)  async1()  new Promise(function(resolve){  console.log('promise1')  resolve() }).then(function() { console.log('promise2') }) console.log('script end')
 //script start  //async1 start  //async2  //promise1  //script end  //async1 end  //promise2     // setTimeout

以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。

微任务包括：process.nextTick ，promise ，Object.observe ，MutationObserver；

宏任务包括：script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering；

很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。

所以正确的一次 Event loop 顺序是这样的：

执行同步代码，这属于宏任务

执行栈为空，查询是否有微任务需要执行

执行所有微任务

必要的话渲染 UI

然后开始下一轮 Event loop，执行宏任务中的异步代码

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。