JavaScript的执行机制_javascript的执行机制(-CSDN博客

本文链接：https://blog.csdn.net/lplife/article/details/107140109

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout1');
}, 200);
setTimeout(function () {
    console.log('setTimeout2');
    new Promise(function (resolve) {
        resolve();
    }).then(function () {
        console.log('then1');
    });
    new Promise(function (resolve) {
        console.log('Promise1');
        resolve();
    }).then(function () {
        console.log('then2');
    });
}, 0);
async1();
new Promise(function (resolve) {
    console.log('promise2');
    resolve();
}).then(function () {
    console.log('then3');
});
console.log('script end');

执行顺序如下

script start
async1 start
async2
promise2
script end
async1 end
then3
setTimeout2
Promise1
then1
then2
setTimeout1

执行解析：

首先整体执行下来，会遇到console.log(‘script start’);是同步任务
直接输出 script start(1)；
接着执行下来，遇到第一个setTimeout 执行时间是0.2秒，先挂起，放进主线程
再往下执行遇到第二个 setTimeout 执行时间是0秒，也先挂起，放到第一个setTimeout的前面
继续执行，遇到async1(); 执行里面的同步任务输出async1 start（2），接着执行async2，输出async2（3）这里有await,后面的代码会被推进微任务
继续执行遇到new Promise 会立即执行，输出promise2（4），then会被推进本轮的第二个微任务。
接着遇到 console.log(‘script end’);同步执行输出script end（5）
第一轮执行完后有两个微任务，依次执行，输出async1 end（6） then3（7）
第一轮执行完毕，之前执行的时候，把两个setTimeout（宏任务）推进主线程，先执行第一个里面的同步任务，输出setTimeout2（8），遇到promise，then被推进微任务，又遇到下一个promise，立即执行器有同步任务，输出 Promise1（9），then被推进微任务
本轮的宏任务执行完毕，接着执行它产生的两个微任务，依次输出 then1(10) then2(11)
第二轮执行完毕，到这里之后，还剩下一个宏任务setTimeout 输出setTimeout1（12）

实际上就是把代码拆出来分成一个个宏任务，每一个宏任务里边会伴随一些微任务，比如上面的代码，JavaScript首先把这整个代码当成第一个宏任务，执行下来遇到同步任务，直接执行，遇到属于本轮的微任务，先放到任务队列中，等整体的宏任务执行完毕，会去执行本次的微任务，遇到宏任务会依次放到主线程中。等这一轮的执行完毕。又去执行第一轮放到主线程中的宏任务，宏任务里面可能会有微任务。等主线程当前的宏任务执行完毕，再去执行它这次产生的微任务。一直反复执行这样的一个过程。

学习心得：多练习几次，还有就是找不同的技术文章反复阅读，不同的作者编写的可能会不一样，可以多篇优秀文章一起阅读，寻找共鸣点，反复推敲。还有就是找类似的题目，尝试根据自己理解写出来，对比对错，找出错误的原因，由易到难。反复阅读复习，你会发现惊喜。