EventLoop 宏任务 微任务

EventLoop

在 EventLoop中，每一次循环称为一次 tick

• 执行栈选择最先进入队列的宏任务，执行其同步代码直至结束
• 检查是否有微任务，如果有则执行直到微任务队列为空
• 如果是在浏览器端，那么基本要渲染页面了
• 开始下一轮的循环(tick)，执行宏任务中的一些异步代码，例如setTimeout等

宏任务

• 渲染事件(比如解析 DOM、计算布局、绘制)
• 用户交互事件(比如鼠标点击、滚动页面、放大缩小等)
• setTimeout、setInterval等
• 网络请求完成、文件读写完成事件

微任务

微任务就是一个需要异步执行的函数
执行时机是在主函数执行结束之后、当前宏任务结束之前

JavaScript执行一段脚本的时候，V8会为其创建一个全局执行上下文，同时 V8 引擎也会在内部创建一个微任务队列这个微任务队列就是用来存放微任务的

使用 MutationObserver 监控某个 DOM节点，或者为这个节点添加、删除部分子节点，当DOM节点发生变化时，就会产生 DOM 变化记录的微任务
使用 Promise，当调用 Promise.resolve()或者Promise.reject()的时候，也会产生微任务

通过 DOM 节点变化产生的微任务或者使用 Promise 产生的微任务都会被 JS 引擎按照顺序保存到微任务队列中

JavaScript 引擎准备退出全局执行上下文并清空调用栈的时候，JavaScript引擎会检查全局执行上下文中的微任务队列，然后按照顺序执行队列中的微任务