0. 前言

1. 宏任务和微任务可能部分道友并不是那么理解
2. 之前看到一个解释 ,觉得还是不错的,记录下来了,但是忘了出处,如有侵权,请告知
3. 需要了解JS运行机制例如事件循序等知识 EventLoop

---

1. EventLoop

1. js是单线程的,同一时间只能做一件事情

1.1 同步任务异步任务

1. 为了防止某个耗时任务导致程序假死的问题,js 把待执行的任务分为了 2 类:

2. 同步任务 synchronous

   • 又叫做非耗时任务,指的是在主线程上排队执行的那些任务
   • 只有前一个任务执行完毕,才能执行后一个任务

3. 异步任务

   • 又叫做耗时任务,异步任务由 JS 委托给宿主环境进行执行

   • 当异步任务执行完成后,会通知 JS 主线程 执行异步任务的回调函数

---

2. 执行顺序

1. 宏任务和微任务的执行顺序是先宏后微。
2. 先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，
3. 当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

---

3. 具体宏任务划分 (macro)task

1. 宏任务有：script (可以理解为外层同步代码)；
2. setTimeout/setInterval3；
3. UI rendering/UI事件；
4. postMessage，MessageChannel5.
5. setImmediate，
6. I/O（Node.js）

---

4. 具体微任务划分 Microtasks

1. 微任务有：Promise2.process.nextTick（Node.js）；
2. Object.observe（已废弃；Proxy 对象替代）；
3. MutaionObserver。

---

5. 练习

1. 测试下

setTimeout(() => {
    console.log("1");
});
new Promise((resolve)=>{
    console.log("2");
    resolve()
}).then(()=>{
    console.log("3");
})
console.log("4");

2. 结果 2 4 3 1

• 分析

3. 先执行所有的同步任务
   创建Promise和 输出 4 都是 同步任务 先执行,
   所以 2 4
4. 在执行微任务
   then是微任务 3
5. 在执行下一个宏任务
   定时器 1
6. 2 4 3 1

---

参考资料

MDN-微任务
Event Loop

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉