0. 前言

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

1. EventLoop

1. js是单线程的,同一时间只能做一件事情
2. 宏任务（macrotask）和微任务（microtask）的区分主要是为了解决 JavaScript 引擎中不同任务之间的执行优先级问题。

1.1 同步任务异步任务

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

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

3. 异步任务

• 又叫做耗时任务,异步任务由 JS 委托给宿主环境进行执行
  
• 当异步任务执行完成后,会通知 JS 主线程 执行异步任务的回调函数
  

2. 执行顺序

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

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

1. 宏任务有：script标签的加载和执行 (可以理解为外层同步代码)；
2. setTimeout/setInterval定时器；
3. UI rendering/UI事件 --DOM 事件处理程序；
4. postMessage，MessageChannel5.
5. setImmediate，
6. I/O（Node.js）
7. AJAX 请求的回调函数

• 对于宏任务，JavaScript 引擎会将其添加到任务队列（task queue）中，在当前任务执行完毕后按顺序依次执行

4. 具体微任务划分 Microtasks

1. 微任务有：Promise.process.nextTick（Node.js）；
   Promise的 then 方法和 catch 方法
2. async/await 中的 await 表达式
3. Object.observe（已废弃；Proxy 对象替代）；
4. MutaionObserver监听器。

• 对于微任务，JavaScript 引擎也会将其添加到任务队列中，但是微任务的执行在当前宏任务执行结束后立即进行
• 也就是说微任务具有更高的执行优先级，可以优先于下一个宏任务执行

5. 技巧

• 通过区分宏任务和微任务，我们可以更好地控制任务的执行顺序，提高应用程序的性能和响应速度

1. 在处理一些异步操作时，可以使用 Promise 来代替普通的回调函数，并通过 then 方法和 catch 方法来实现更灵活、更高效的任务处理方式。
2. 同时，在编写代码时需要注意，尽量避免在宏任务中进行耗时操作，以免影响其他任务的执行。

6. 练习

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

初心

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

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

共勉