1.事件循环

要了解宏任务与微任务首先我们得了解事件循环

事件循环:浏览器解析执行js代码的一种运行机制(规则)

js代码:可以分为两种

1.同步代码

2.异步代码:

(1)异步宏任务

例子:
a.事件
b.网络请求(ajax)
c.setTime()定时器

(2)异步微任务

1. Promise.then()//then才是异步,promise只是个容器

2.async/await

2.通过以下代码去学习宏任务与微任务

<!DOCTYPE html>
<html lang="en">

<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);
        async function fnOne() {
            console.log(2);
            await fnTwo(); // 右结合先执行右侧的代码, 然后等待
            console.log(3);
        }
        async function fnTwo() {
            console.log(4);
        }
        fnOne();

        setTimeout(() => {
            console.log(5);
        }, 2000);

        let p = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
            console.log(6);
            resolve();
            console.log(7);
        })

        setTimeout(() => {
            console.log(8)
        }, 0)

        p.then(() => {
            console.log(9);
        })
        console.log(10);
    </script>
    <script>
        console.log(11);
        let b = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
            resolve(33);
        })
        b.then(res => {
            console.log(res)
        })
        setTimeout(() => {
            console.log(12);
            let p = new Promise((resolve) => {
                resolve(13);
            })
            p.then(res => {
                console.log(res);
            })
            console.log(15);
        }, 0)
        console.log(14);
    </script>
    <script>
        console.log(30)
        let c = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
            resolve(37);
        })
        c.then(res => {
            console.log(res)
        })
    </script>
</body>

</html>

代码解析:根据以下内容分析代码

1.进入到script标签,就进入到了第一次事件循环.

2.遇到同步代码，立即执行

3.遇到宏任务,放入到宏任务队列里.

4.遇到微任务,放入到微任务队列里.

5.执行完所有同步代码

6.执行微任务代码

7.微任务代码执行完毕，本次队列清空

寻找下一个宏任务，重复步骤1

以此反复直到清空所以宏任务，这种不断重复的执行机制，就叫做事件循环

注意点:

代码中有三个script标签

后面两个script标签相对于第一个script来说就相当于两个特殊的宏任务

第一个script中的同步代码与异步微任务解析完成后会去解析第二个script的同步代码与异步微任务以此类推.当三个script标签中的同步代码与异步微任务代码都解析完了,再开始依次解析异步宏任务.

陷阱:

  setTimeout(() => {
            console.log(5);
        }, 2000);
        *当宏任务设置了时间就会在最后执行,如果多个宏任务设置时间,时间越大的越后执行,依次解析.

对宏任务与微任务的理解