好记性不如烂笔头

在整理上一个博客的时候突然回顾了js的事件池，在此做一个记录，以便后续翻看节省时间

JS从上往下执行顺序，

当遇到同异步时比如sync ，await，setTimeout，Promise函数，那我们需要对JS的事件执行进行整理

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。 setTimeout/Promise 等API便是任务源，而进入任务队列的是他们指定的具体执行任务。

                                    

运行机制

每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

微任务与宏任务

宏任务主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、setImmediate(Node.js 环境)

微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)

我们的JavaScript的执行过程是单线程的，所有的任务可以看做存放在两个队列中——执行队列和事件队列。

执行队列里面是所有同步代码的任务，事件队列里面是所有异步代码的宏任务，而我们的微任务，是处在两个队列之间。

当JavaScript执行时，优先执行完所有同步代码，遇到对应的异步代码，就会根据其任务类型存到对应队列（宏任务放入事件队列，微任务放入执行队列之后，事件队列之前）；当执行完同步代码之后，就会执行位于执行队列和事件队列之间的微任务，然后再执行事件队列中的宏任务。

参考代码和资料 https://github.com/dwqs/blog/issues/61