js 事件循环机制、宏任务微任务

宏任务和微任务

定义
- 宏任务：常用的包括setTimeout,setInterval
- 微任务：常用的包括Promise. then finally catch, process.nextTick
执行顺序为：微任务先于宏任务执行

javascript">        setTimeout(function () {
            console.log('setTiemout宏任务')
        }, 0)

        new Promise(resolve => {
            resolve()
            console.log('Promise内部的普通语句，也是同步任务')
        })
            .then(() => {
                console.log('then,这里就是微任务')
            })

        console.log('Promise外部的同步任务')

        /*输出结果为
         *Promise内部的普通语句，也是同步任务
         *Promise外部的同步任务
         *then,这里就是微任务
         *setTiemout宏任务
         */

透彻浏览器事件循环机制

在这里插入图片描述

也就是说，浏览器执行js，先执行主线程的同步任务，在途中如果遇到宏任务，会使其进入宏任务队列；微任务也是同理。
主线程同步任务都执行完毕后，会执行此时可以执行的所有微任务；微任务执行完毕后，会执行宏任务队列的第一个任务；执行完毕后，然后就去查看微任务队列是否有可执行的微任务，如果有，全部执行；没有的话，再去执行宏任务队列的第一个任务。
执行一次宏任务后，再执行此时全部可执行的微任务，再到执行宏任务，称为一次事件循环。
浏览器事件循环机制和Node事件循环机制有所区别，这里只讨论前者。
栗子：

javascript">    //1. 主线程直接执行1
    console.log('1');

    //进入宏任务队列1
    setTimeout(function() {
        //5. 直接执行
        console.log('2');

        //进入微任务队列3
        process.nextTick(function() {
            //6. 微任务执行3
            console.log('3');
        })

        new Promise(function(resolve) {
            //7. 直接执行
            console.log('4');
            resolve();
        })
        //进入微任务队列4
        .then(function() {
            //8. 微任务执行4
            console.log('5')
        })
    })

    //进入微任务队列1
    process.nextTick(function() {
        //3. 微任务执行1
        console.log('6');
    })

    new Promise(function(resolve) {
        //2. 主线程直接执行2
        console.log('7');

        resolve();
    })
    //进入微任务队列2
    .then(function() {
        //4. 微任务执行2
        console.log('8')
    })
    
    //进入宏任务队列2
    setTimeout(function() {
        //9. 直接执行
        console.log('9');

        //进入微任务队列5
        process.nextTick(function() {
            //11. 微任务执行5
            console.log('10');
        })

        new Promise(function(resolve) {
            //10. 直接执行
            console.log('11');
            resolve();
        })
        //进入微任务队列6
        .then(function() {
            //12. 微任务执行6
            console.log('12')
        })
    })

    //输出结果为：1，7，6，8，2，4，3，5，9，11，10，12

上面的代码中，有三次事件循环：
- 第一次循环：主线程直接输出1,7，然后执行全部的微任务，输出6,8。
- 第二次循环：第一个setTimeout宏任务进入主线程，直接输出2,4，然后执行全部的微任务，输出3,5。
- 第三次循环：第二个setTimeout宏任务进入主线程，直接输出9,11，然后执行全部的微任务，输出10,12。
- PS: 在宏任务中的微任务，一定会执行完毕后才继续执行其他的宏任务，就像上面代码中，先输出的是第一个setTimeout的同步代码，然后是微任务代码，而不是第二个setTimeout的同步代码。