JS篇 （四）事件循环、宏任务和微任务

1.事件循环（Event Loop）

1)解释

事件循环是js环境运行的核心机制，用于协调事件、用户交互、脚本、渲染网络等。
js是单线程的，事件循环使它能执行非阻塞任务，在等待I/O长时间任务是也能保持响应性。

2)执行顺序

a.执行全局脚本代码，直接运行同步代码；
b.执行栈为空，执行微观任务，直至清空队列；
c.执行一个宏任务；
d.再洗执行微观任务，直至清空队列；
e.如有必要进行UI渲染；
f.开启下一轮事件循环。

2.宏任务

1)解释

事件循环中一个较大的任务单元，每个宏任务会开启一个新的事件循环。
一个宏任务的完成通常会涉及到一个较为完整的工作流程，每个宏任务执行完毕后，会从任务队列中清除。

2)常见应用

a.setTimeout
b.setInterval
c.setImmediate 在nodeJs中类似setTimeout
d.I/O操作
e.UI渲染
f.requestAnimationFrame 动画渲染函数

3.微任务

1)解释

当前宏任务执行完毕后立即执行的任务。

2)常见应用

a.promise.then/catch/finally
b.promise 回调
c.async/await axync是promise的一种语法包装
d.process.nextTick 仅在nodeJs，当前阶段完成后，下个事件循环开始前安排一个回调函数尽快执行
e.mutationObserver() 浏览器中用于观察DOM树变化，监听DOM触发微任务

注：定时器时间不是函数执行时间，而是添加任务到队列的时间；
async是异步操作但是同步执行，awai是异步的从语法上来说同then。

4.任务队列

保持待处理任务的数组

延伸

1.事件循环

js采用单线程事件循环方式管理异步任务。

2.任务队列

js采用非抢断式运行，当前任务不会被打算，新的异步任务会放入任务队列。

3.宏/微任务

宏任务是普通异步任务最早出现；
微任务更关乎于用户体验，所以优先执行。