浏览器-EventLoop-完整流程-摩杜云开发者社区

JS 是单线程的，JS 中的代码都是串行的，前面没有执行完毕后面不能执行

程序运行会从上至下依次执行所有的同步代码
在执行的过程中如果遇到异步代码会将异步代码放到事件循环 中
当所有同步代码都执行完毕后，JS 会不断检测事件循环 中的异步代码是否满足条件
一旦满足条件就执行满足条件的异步代码

完整执行顺序

从上至下执行所有同步代码
在执行过程中遇到宏任务就放到宏任务队列中，遇到微任务就放到微任务队列中
当所有同步代码执行完毕之后，就执行微任务队列中满足需求所有回调
当微任务队列所有满足需求回调执行完毕之后，就执行宏任务队列中满足需求所有回调
... ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 1.定义一个宏任务
    setTimeout(function () {
        console.log("setTimeout1");
    }, 0);

    // 2.定义一个微任务
    Promise.resolve().then(function () {
        console.log("Promise1");
    });
    console.log("同步代码Start");

    Promise.resolve().then(function () {
        console.log("Promise2");
    });
    setTimeout(function () {
        console.log("setTimeout2");
    }, 0);
    console.log("同步代码End");
</script>
</body>
</html>

浏览器-EventLoop-完整流程

注意点：每执行完一个宏任务都会立刻检查微任务队列有没有被清空，如果没有就立刻清空：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 定义一个宏任务
    setTimeout(function () {
        console.log("setTimeout1");

        // 定义一个微任务 p1
        Promise.resolve().then(function () {
            console.log("Promise1");
        });

        // 定义一个微任务 p2
        Promise.resolve().then(function () {
            console.log("Promise2");
        });
    }, 0);

    // 定义一个宏任务
    setTimeout(function () {
        console.log("setTimeout2");

        // 定义一个微任务 p3
        Promise.resolve().then(function () {
            console.log("Promise3");
        });

        // 定义一个微任务 p4
        Promise.resolve().then(function () {
            console.log("Promise4");
        });
    }, 0);
</script>
</body>
</html>

浏览器-EventLoop-完整流程

如下是我给出了一个小小的额外练习题吧算是，自行去分析运行的结果代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 定义一个宏任务
    setTimeout(function () {
        console.log("setTimeout1");
        // 定义一个微任务 p2
        Promise.resolve().then(function () {
            console.log("Promise2");
        });

        // 定义一个微任务 p3
        Promise.resolve().then(function () {
            console.log("Promise3");
        });
    }, 0);

    // 定义一个微任务 p3
    Promise.resolve().then(function () {
        console.log("Promise1");
        // s2
        setTimeout(function () {
            console.log("setTimeout2");
        });
        
        // s3
        setTimeout(function () {
            console.log("setTimeout3");
        });
    });
</script>
</body>
</html>