微任务和宏任务
2021-09-25 本文已影响0人
9月的甜橙子
JS是单线程的，可以把这个线程叫做主线程，主线程中包含宏任务队列和微任务队列，宏任务所在的队列就叫宏任务队列，微任务所在的队列就叫微任务队列。常见的宏任务有setTimeout``setInterval常见的微任务有new Promise().then()。
宏任务的特点是：
- 第一个宏任务队列中只有一个任务，就是执行主线程的js代码；
- 宏任务队列可以有多个
- 当前宏任务队列中的任务全部执行完以后会查看当前是否有微任务。如有则执行微任务
微任务的特点是：
- 只有一个微任务队列
- 当前宏任务队列中的任务全部执行完以后会查看当前是否有微任务。如有则执行微任务队列中的所有微任务
根据规范，事件循环是通过任务队列的机制来进行协调的。
一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。setTimeout/Promise 等API便是任务源，而进入任务队列的是他们指定的具体执行任务。
JS分为同步任务和异步任务
同步任务都在主线程上执行，形成一个执行栈
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。
宏任务
script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
微任务
Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)
运行机制
- 执行一个宏任务（栈中没有就从事件队列中获取）
- 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
- 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
- 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
- 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
refer to https://zhuanlan.zhihu.com/p/78113300
