[基础]event loop与微任务、宏任务

event loop

js是单线程脚本语言，开发中了解代码执行顺序就显得格外重要，代码从上往下执行过程中 如果所有都是同步任务，将会造成严重的性能问题。

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

异步任务分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）。

MacroTask（宏任务）

当前调用栈中执行的代码成为宏任务。（主代码块，定时器等等）

#	浏览器	Node
I/O	√	√
setTimeout	√	√
setInterval	√	√
setImmediate		√
requestAnimationFrame	√
UI Rendering	√

MicroTask（微任务）

当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。

#	浏览器	Node
process.nextTick		√
MutationObserver	√
Promise.then catch finally	√	√

微任务与宏任务的区别

宏任务中的事件放在callback 队列中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

宏微任务的运行机制

1. 在执行栈中执行一个宏任务。

2. 执行过程中遇到微任务，将微任务添加到微任务队列中。

3. 当前宏任务执行完毕，立即执行微任务队列中的任务。

4. 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。

5. 渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

参考：

微任务、宏任务与Event-Loop

一次弄懂Event Loop

微任务和宏任务的区别