一、什么是宏工作和微工作？
首先，咱们要先理解下 Js 。js 是一种单线程语言，简略的说就是：只有一条通道，那么在工作多的状况下，就会呈现拥挤的状况，这种状况下就产生了 ‘多线程’ ，然而这种“多线程”是通过单线程模拟的，也就是假的。那么就产生了同步工作和异步工作。
二、JS为什么要辨别宏工作和微工作?
（1）js是单线程的，然而分同步异步\
（2）微工作和宏工作皆为异步工作，它们都属于一个队列\
（3）宏工作个别是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)\
（4）微工作：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)\
（5）先执行同步再执行异步，异步遇到微工作，先执行微工作，执行完后如果没有微工作，就执行下一个宏工作，如果有微工作，就按程序一个一个执行微工作
三、宏工作、微工作有哪些？
- 宏工作个别是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)
- 微工作：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)
四、宏工作、微工作是怎么执行的？
执行程序：先执行同步代码，遇到异步宏工作则将异步宏工作放入宏工作队列中，遇到异步微工作则将异步微工作放入微工作队列中，当所有同步代码执行结束后，再将异步微工作从队列中调入主线程执行，微工作执行结束后再将异步宏工作从队列中调入主线程执行，始终循环直至所有工作执行结束。
这里容易产生一个谬误的意识：就是微工作先于宏工作执行。实际上是先执行同步工作而后在执行异步工作，异步工作是分宏工作和微工作两种的。
案例
例一：
setTimeout(function(){ console.log(1);});new Promise(function(resolve){ console.log(2); resolve();}).then(function(){ console.log(3);}).then(function(){ console.log(4)}); console.log(5);// 2 5 3 4 1剖析：
- 遇到setTimout，异步宏工作，放入宏工作队列中
- 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输入2
- Promise.then，异步微工作，将其放入微工作队列中
- 遇到同步工作console.log(5);输入5；主线程中同步工作执行完
- 从微工作队列中取出工作到主线程中，输入3、 4，微工作队列为空
- 从宏工作队列中取出工作到主线程中，输入1，宏工作队列为空
例二：
setTimeout(()=>{ new Promise(resolve =>{ resolve(); }).then(()=>{ console.log('test'); }); console.log(4);});new Promise(resolve => { resolve(); console.log(1)}).then( () => { console.log(3); Promise.resolve().then(() => { console.log('before timeout'); }).then(() => { Promise.resolve().then(() => { console.log('also before timeout') }) })})console.log(2);//1，2，3，before timeout，also before timeout，4，test;剖析：
- 遇到setTimeout，异步宏工作，将() => {console.log(4)}放入宏工作队列中；
- 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输入1；
- 而Promise.then，异步微工作，将其放入微工作队列中
- 遇到同步工作console.log(2)，输入2；主线程中同步工作执行完
- 从微工作队列中取出工作到主线程中，输入3，此微工作中又有微工作，Promise.resolve().then(微工作a).then(微工作b)，将其顺次放入微工作队列中；
- 从微工作队列中取出工作a到主线程中，输入 before timeout；
- 从微工作队列中取出工作b到主线程中，工作b又注册了一个微工作c，放入微工作队列中；
- 从微工作队列中取出工作c到主线程中，输入 also before timeout；微工作队列为空
- 从宏工作队列中取出工作到主线程，此工作中注册了一个微工作d，将其放入微工作队列中，接下来遇到输入4，宏工作队列为空
- 从微工作队列中取出工作d到主线程 ，输入test，微工作队列为空
例三：
console.log(1)setTimeout(function() { console.log(2)}, 0)const p = new Promise((resolve, reject) => { resolve(4)})p.then(data => { console.log(data)})console.log(3)//1，3，4，2剖析：
- 遇到同步工作console.log(1);输入1；
- 遇到setTimeout 异步宏工作，放入宏工作队列中；
- 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，但因为new Promise没有输入事件，所以接着执行遇到.then；
- 执行.then，异步微工作,被散发到微工作Event Queue中；
- 遇到同步工作console.log(3);输入3；
- 主线程中同步工作执行完，从微工作队列中取出工作到主线程中，p.then 输入4,微工作执行结束，工作队列为空；
- 开始执行宏工作setTimeout 输入2,宏工作队列为空；
例四：
console.log(1)setTimeout(function() { console.log(2) new Promise(function(resolve) { console.log(3) resolve() }).then(function() { console.log(4) })})new Promise(function(resolve) { console.log(5) resolve()}).then(function() { console.log(6)})setTimeout(function() { console.log(7) new Promise(function(resolve) { console.log(8) resolve() }).then(function() { console.log(9) })})console.log(10)//1，5，10，6，2，3，4，7，8，9剖析：
- 遇到同步工作console.log(1);输入1；
- 遇到setTimeout 异步宏工作，放入宏工作队列中；
- 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输入5，所以接着执行遇到.then；
- 执行.then，异步微工作,被散发到微工作Event Queue中；
- 遇到setTimeout，异步宏工作;放入宏工作队列中；
- 遇到同步工作console.log(10);输入10,主线程中同步工作全副执行完;
- 从微工作队列中取出工作到主线程中，输入6；
- 在从宏工作队列中取出工作到主线程中，执行第一个setTimeout，输入2，3，4（在宏工作中执行同步,同步，异步微工作）;
- 在执行第二个setTimeout，输入7，8，9（和8同理）；
例五：
new Promise((resolve, reject) => { resolve(1) new Promise((resolve, reject) => { resolve(2) }).then(data => { console.log(data) })}).then(data => { console.log(data)})console.log(3)//3，2，1剖析：
- 遇到Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,但因为new Promise没有输入事件，所以接着往下执行遇到new Promise没有输入事件再接着往下执行遇到.then,异步微工作,被散发到微工作Event Queue中，再接着 .then 放入微工作
- 遇到同步工作console.log(3) 输入3，主线程中同步工作执行完；
- 从微工作队列中取出工作到主线程中，输入2，1，微工作执行结束，工作队列为空。
总结
微工作和宏工作的执行程序是先执行同步工作，先执行同步后异步，异步分为宏工作和微工作两种，异步遇到微工作先执行微工作，执行完后如果没有微工作，就执行下一个宏工作。
该文章首发于掘金平台
最初感激大家浏览⭐️⭐️⭐️，如果喜爱对你也有帮忙，欢送点赞和留言哟