微任务与宏任务

微任务(microtask)与宏任务(macrotask / task queue)

表示异步任务的两种分类 https://juejin.cn/post/6844903512845860872

一、宏任务

执行主线 js 代码、setTimeout\setInterval\setImmediate 、 requestAnimationFrame、浏览器事件、解析 html 等、

二、微任务

Promise.then.catch.finally \ MutationObserver (DOM 发生变化) \ node.js中的 process.nextTick；微任务会尽快通过异步方式执行

三、顺序

1. 处理 1 个宏任务后将它移出队列 -> 处理所有微任务队列中的任务 -> 需要的话重新渲染页面 -> 处理下一个宏任务；

2. 单次事件循环最多处理一个宏任务，但所有微任务都会被处理；

3. 当微任务队列执行完时，事件循环会检查是否需要更新 UI；如果一个宏任务执行完，微任务队列中有微任务，则微任务执行之前不允许重新渲染页面

四、其他

1. 单次事件循环不应该超过 16ms,因为浏览器试图每秒渲染 60 次，1000/60=16.66,因为任务执行时不能更新视图，所以超出这个时间会导致页面看起来卡顿；

2. 使用计时器，可以将一个长时间的、阻塞页面的任务优化为多个任务，因为 2 个任务**之间**是可以渲染页面的；

3. 事件监测和添加任务是独立于事件循环的，否则执行 js 时发生的事件将会被忽略；

4. setTimeout 是经过指定时间后，把要执行的任务加入到 Event Queue 中，主线程执行完后来 Event Queue 中读取，如果主线程执行完时间太久，导致真正执行 setTimeout 回调的时间远远大于设置时的时间；

5. setInterval 会每隔指定的时间将注册的函数置入 Event Queue，如果主线程执行太久，也许有多次间隔定时器到期的行为，但如果队列中有排队的此任务，**该次到期就会被忽略**，并不会重复添加；