js事件循环EventLoop学习笔记

eventLoop用途

js是单线程，js单线程任务分为同步和异步2大类，如果任务依次执行，执行异步任务时候，同步任务也需要等待，就形成了阻塞。为了解决异步任务会阻塞单线程的问题，JS定义了事件循环的运行机制。

eventLoop循环步骤

1. 同步任务会形成一个执行栈[1]，js主线程先执行同步任务。
2. 异步任务有了结果，会被外部api添加一个事件到任务队列中。
3. 执行栈一旦清空，任务队列中的事件会自动进入主线程，队列中事件对应的回调函数会被依次执行。
4. 重复以上1和3。这种js的运行机制叫做事件循环。

微任务microtask,宏任务macrotask

• 任务队列中，有的是微任务有的是宏任务。

  宏任务：script脚本, setTimeout, setInterval, I/O, UI Rendering, setImmediate(nodejs)
  微任务：promise.then, MutationObserver[3], process.nextTick(nodejs)

• 微任务队列总是在执行栈清空后先被读取执行，微任务队列清空后，才执行宏任务队列中的事件。每一次微任务执行完毕后，会进行ui渲染，渲染完后才进入下一次宏任务的执行。

名词理解

[1] 理解js执行栈
[3] MutationObserver的mdn文档