本文深入解析JavaScript单线程模型下的任务队列机制，详细区分同步任务、宏任务与微任务的执行优先级。通过Event Loop机制、Promise及setTimeout等实例，阐明微任务优先于宏任务执行的原理，并解答常见面试题中的执行顺序问题。
一、JavaScript单线程
JavaScript采用单线程模型，意味着在同一时刻只能执行一个任务。只有当当前任务执行完毕后，才能开始执行后续任务。如果遇到耗时较长的操作，会导致后续代码无法立即执行。
在深入之前，需要明确同步与异步的概念。
1. 同步任务（synchronous）
console.log(123);
console.log(456);
for (let i = 1; i <= 5; i++) {
console.log(i);
}
顾名思义，同步任务是按照代码书写顺序依次执行的。
2. 异步任务（asynchronous）
setTimeout(() => {
console.log('定时器');
}, 0)
console.log('奥特曼');按照常规执行逻辑，定时器代码位于上方，似乎应该先输出定时器的内容，再输出“奥特曼”。
但实际运行结果却是先输出“奥特曼”，随后才输出定时器内容。原因在于 setTimeout 属于异步任务。
补充一个知识点：setTimeout 设定的定时器无论延迟多少毫秒，均被视为异步任务。不同浏览器的实现存在差异，但通常定义了最小延迟时间为 4 毫秒，即使设置为 0 也不会立即执行。
二、任务队列(task queue)
通过上述代码可知，setTimeout 是异步的。由此明确了执行顺序的优先级：同步代码优先于异步代码。因此，在任务队列中主要分为两类：1. 同步任务 2. 异步任务。
1.执行栈
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个“任务队列”（task queue）。只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。
（3）一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，查看其中有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步，称为事件循环(Event Loop)。
简单举个梨子
同样都是去吃饭 但是p2 省去了出去的时间过程
简单了解后 我们再来深入了解 异步任务中的 宏任务（macrotask ）和 微任务（microtask ）
个人理解： 对于宏任务和微任务 可以理解为两种异步的形态， 异步有两个孩子 宏任务 和 微任务
宏任务中的方法：1. script (可以理解为外层同步代码，作为入口 ) 2. setTimeout/setInterval
微任务中的方法：1.Promise 2. nextTick
而他们的执行顺序 是 微任务 先输出 在输出 宏任务
口说无凭 上代码
setTimeout(() => {
console.log('定时器');
}, 0)
new Promise((resolve) => {
console.log('同步代码')
resolve('异步代码')
}).then((res) => {
console.log(res);
})
console.log('奥特曼');
注意奥 new Promise是创建一个构造函数 这个过程是同步的，而.then方法是异步的 所以代码先执行 同步>微任务>宏任务
为了更加详细 用图来描述执行过程 下面的图有一丁丁大 学习不怕费流量哦
这些图在融合一下
扩展一下setTimeout的理解
疑问点1 同步代码执行完了 setTimeout会从0计时吗
setTimeout(() => {
console.log('setTimeout');
}, 1000);
console.log('奥特曼');
for (let i = 0; i < 1000; i++) {
console.log('');
}
此时要表明的是 我在for循环的时候setTimeout也会去计时 他会去开启一个定时器模块 ，所以说执行主线程的时候，定时器模块已经开始执行了，所以不会再去等待1秒去执行
(千万别以为同步执行完了，再去计时哦)
疑问点2：两个定时器 上面的定时器先执行 在执行下面的定时器吗？
测验我们只修要在加一个定时器 看看谁先执行就好了
setTimeout(() => {
console.log('setTimeout1');
}, 2000);
setTimeout(() => {
console.log('setTimeout2');
}, 1000);
结果发现 如果有两个定时器，时间少的会优先放到主线程里去执行
疑问点3：定义一个变量为0 设置两个一样的定时器事件 他会输出什么结果 ？ (面试题)
i = 0
setTimeout(() => {
console.log(++i); //1
}, 1000);
setTimeout(() => {
console.log(++i); //2
}, 1000);看到现在 肯定要知道 定时器宏任务不是一起执行的 依次执行！！
宏任务、微任务 执行顺序面试题
console.log('1');
setTimeout(function () {
console.log('2');
process.nextTick(function () {
console.log('3');
})
new Promise(function (resolve) {
console.log('4');
resolve();
}).then(function () {
console.log('5')
})
})
process.nextTick(function () {
console.log('6');
})
new Promise(function (resolve) {
console.log('7');
resolve();
}).then(function () {
console.log('8')
})
setTimeout(function () {
console.log('9');
process.nextTick(function () {
console.log('10');
})
new Promise(function (resolve) {
console.log('11');
resolve();
}).then(function () {
console.log('12')
})
})答案 ：
第一轮 执行外面同步代码 ： 1 7
第二轮 执行 微任务 ： 6 8
第三轮 宏任务 第一个setTimeout : 同步 2 4 微任务 3 5 第二个setTimeout：同步 9 11 微任务 10 12
整体答案： 1、7 、6、8、2、4、3、5、9、11、10、12
2021.8.6
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(1);
setTimeout(()=>{
console.log(2);
},20)
console.log(3);
setTimeout(()=>{
console.log(4);
},0)
console.log(5);
setTimeout(()=>{
console.log(6);
},10)
console.log(9);
setTimeout(()=>{
console.log(10);
},10)
for(var i =0;i<4047999;i++){}
console.log(7);
setTimeout(()=>{
console.log(8);
},10)
console.log(11);
setTimeout(()=>{
console.log(12);
},10)
</script>
</body>
</html>答案 ：1 3 5 9 7 11 4 6 10 2 8 12
刚开始整个同步代码宏任务： 1 3 5 9 7 11
setTimeout宏任务：4 6 10 2 8 12
为什么执行2 不执行下面的呢 因为for循环中已经执行了 阻塞了下面的代码 定时器模块2已经输出了所以在执行下面的，更重要的是 和你的浏览器运行速度有很大的关系 上面的for循环中的4047999 是针对我浏览器的运行速度，不断的刷新 可能出现不同的结果。你可以继续把这个数加大那么一直先输出的都是2 如果你调的很小那么2就会最后输出
到此这篇关于JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序的文章就介绍到这了,更多相关js宏任务和 微任务执行顺序内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！