深入解析JavaScript宏任务与微任务的执行机制

一、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

到此这篇关于浅谈JavaScript宏任务和微任务执行顺序的文章就介绍到这了,更多相关JavaScript宏任务和微任务执行顺序内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！