浅谈js任务队列（microtask and macrotask）

首先思考如下一段代码

// setTimeout
setTimeout(() => {
	console.log("setTimeout");
});
// promise
Promise.resolve().then(() => {
	console.log("promise");
});

你觉得会是以什么样的顺序输出？
那么反过来如下呢？

// promise
Promise.resolve().then(() => {
	console.log("promise");
});
// setTimeout
setTimeout(() => {
	console.log("setTimeout");
});

请自己打开控制台运行一遍结果看是否与自己的预期相同

浏览器中的每一段顺序执行的代码都是一个任务，他会被安放在macrotask的队列中，所以我们从打开浏览器开始执行js的时候，macrotask中就有了这么一个任务，然后执行的过程中遇到了I/O操作（鼠标键盘及其他设备）、网络操作、html parsing等等的异步操作，会把这些异步的任务的回调函数放在macrotask中，然后继续执行。

但是有部分的异步操作是不会放在macrotask中的，而是会放在microtask中的，比如上面例子中的promise中的异步操作。

所以浏览器存在着至少2个任务队列，一个是microtask，一个是macrotask。浏览器先执行