关于浏览器中的EventLoop简单认识

浏览器中的 Event Loop

js代码都是同步执行的，有序的放入到执行栈中。如果遇到异步代码，会先挂起到任务队列中，当执行栈为空时候，将EventLop需要的执行的时候，从任务队列中取出，放入执行栈中执行。执行结束推出执行栈。

• EventLop 主要 放在 任务队列中，队列数据结构：先进先出原则

任务队列

• 微任务 process.nextTick，promise，MutationObserver
• 宏任务 script，setTimeout，setInterval，setImmediate，I/O，UI rendering

Event Loop 执行顺序如下所示

• 首先执行同步代码，这属于宏任务
• 当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
• 执行所有微任务
• 当执行完所有微任务后，如有必要会渲染页面
• 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是setTimeout中的回调函数

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