乐趣区

关于前端:宏任务和微任务的理解

jiezi

一、什么是宏工作和微工作？

首先，咱们要先理解下 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

剖析：

  1. 遇到 setTimout，异步宏工作，放入宏工作队列中
  2. 遇到 new Promise，new Promise 在实例化的过程中所执行的代码都是同步进行的，所以输入 2
  3. Promise.then，异步微工作，将其放入微工作队列中
  4. 遇到同步工作 console.log(5); 输入 5；主线程中同步工作执行完
  5. 从微工作队列中取出工作到主线程中，输入 3、4，微工作队列为空
  6. 从宏工作队列中取出工作到主线程中，输入 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;

剖析：

  1. 遇到 setTimeout，异步宏工作，将 () => {console.log(4)} 放入宏工作队列中；
  2. 遇到 new Promise，new Promise 在实例化的过程中所执行的代码都是同步进行的，所以输入 1；
  3. 而 Promise.then，异步微工作，将其放入微工作队列中
  4. 遇到同步工作 console.log(2)，输入 2；主线程中同步工作执行完
  5. 从微工作队列中取出工作到主线程中，输入 3，此微工作中又有微工作，Promise.resolve().then(微工作 a).then(微工作 b)，将其顺次放入微工作队列中；
  6. 从微工作队列中取出工作 a 到主线程中，输入 before timeout；
  7. 从微工作队列中取出工作 b 到主线程中，工作 b 又注册了一个微工作 c，放入微工作队列中；
  8. 从微工作队列中取出工作 c 到主线程中，输入 also before timeout；微工作队列为空
  9. 从宏工作队列中取出工作到主线程，此工作中注册了一个微工作 d，将其放入微工作队列中，接下来遇到输入 4，宏工作队列为空
  10. 从微工作队列中取出工作 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

剖析：

  1. 遇到同步工作 console.log(1); 输入 1；
  2. 遇到 setTimeout 异步宏工作，放入宏工作队列中；
  3. 遇到 Promise，new Promise 在实例化的过程中所执行的代码都是同步进行的，但因为 new Promise 没有输入事件，所以接着执行遇到.then；
  4. 执行.then，异步微工作, 被散发到微工作 Event Queue 中；
  5. 遇到同步工作 console.log(3); 输入 3；
  6. 主线程中同步工作执行完，从微工作队列中取出工作到主线程中，p.then 输入 4, 微工作执行结束，工作队列为空；
  7. 开始执行宏工作 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

剖析：

  1. 遇到同步工作 console.log(1); 输入 1；
  2. 遇到 setTimeout 异步宏工作，放入宏工作队列中；
  3. 遇到 Promise，new Promise 在实例化的过程中所执行的代码都是同步进行的，所以输入 5，所以接着执行遇到.then；
  4. 执行.then，异步微工作, 被散发到微工作 Event Queue 中；
  5. 遇到 setTimeout，异步宏工作; 放入宏工作队列中；
  6. 遇到同步工作 console.log(10); 输入 10, 主线程中同步工作全副执行完;
  7. 从微工作队列中取出工作到主线程中，输入 6；
  8. 在从宏工作队列中取出工作到主线程中，执行第一个 setTimeout，输入 2，3，4（在宏工作中执行同步, 同步，异步微工作）;
  9. 在执行第二个 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

剖析：

  1. 遇到 Promise,new Promise 在实例化的过程中所执行的代码都是同步进行的, 但因为 new Promise 没有输入事件，所以接着往下执行遇到 new Promise 没有输入事件再接着往下执行遇到.then, 异步微工作, 被散发到微工作 Event Queue 中，再接着 .then 放入微工作
  2. 遇到同步工作 console.log(3) 输入 3，主线程中同步工作执行完；
  3. 从微工作队列中取出工作到主线程中，输入 2，1，微工作执行结束，工作队列为空。

总结

微工作和宏工作的执行程序是先执行同步工作，先执行同步后异步，异步分为宏工作和微工作两种，异步遇到微工作先执行微工作，执行完后如果没有微工作，就执行下一个宏工作。

该文章首发于掘金平台

最初感激大家浏览⭐️⭐️⭐️，如果喜爱对你也有帮忙，欢送点赞和留言哟💕💕💕

退出移动版