浏览器中的消息队列和事件循环

事件循环是如何产生的

在浏览器中，JS 的主线程是单线程的，异步的代码被放到了任务队列中，JS 主线程不断地轮询任务队列，每次从队首取出一个任务并进行处理，从而构成了事件环。

任务队列的类型

任务队列有两种，分别是宏任务（macrotask）队列和微任务（microtask）队列，用于存放不一样的任务：

• 宏任务主要有：script（用户代码）、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel 等
• 微任务主要有：Promise.then、 MutationObserver 等

事件环的工做流程

• JS 引擎首先从上而下执行用户 script 代码（宏任务）
• 若是遇到 setTimeout、promise、click事件等，按照分类放入宏任务队列或微任务队列中
• 继续执行后面的代码，script 执行完毕后，会清空全部的微任务
• 微任务清空后可能会进行一次 UI 渲染（不是每次都会）
• 而后再去宏任务队列中取出一个执行，循环往复

图示