EventLoop循环机制详解(微任务、宏任务与async-await)

川长思鸟来 2023-01-23 06:53 13阅读 0赞

> https://www.jianshu.com/p/5b4c4756e461 图片引用

![\#\#\# 单页应用 SPA][_ SPA]  
首先明晰两个概念：

### 宏任务和微任务 ###

也称之为 task 和microtask ，微任务要先于宏任务执行

#### 宏任务主要有： ####

script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

#### 微任务主要有： ####

Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

宏任务和微任务的区分：首先前端代码执行 都是依赖于浏览器 和 node 环境的 ，我们暂且称之为宿主。即在宿主可控的范围内的都属于宏任务，宿主线程的回调就是宏队列。

以下运行示例：

console.log(1);                        //非异步 直接输出1 
    setTimeout(function() {                 //异步 进入宏任务队列 
        console.log(2);
    }, 0);
    new Promise(function(resolve) { 
        console.log(3);                    //非异步 直接输出3
        resolve(Date.now());
    }).then(function() { 
        console.log(4);                    //异步 进入微任务队列 
    });
    console.log(5);                        //非异步 直接输出5
    setTimeout(function() {                //异步 进入宏任务队列
        new Promise(function(resolve) { 
            console.log(6);               //局部非异步
            resolve(Date.now());
        }).then(function() { 
            console.log(7);
        });
    }, 0);
    
    
    第一遍 输出 1 3 5 后此时宏任务队列中存在   2    6/7   微任务队列存在4  
    按照微任务先于宏任务的原则  所以第四个输出4  第五个输出2 而第二个宏任务中存在局部非异步和一个微任务7 
    
    运行顺序：因此，最终的输出顺序为：1, 3, 5, 4, 2, 6, 7;
    
    
    
    作者：腾讯IVWEB团队
    链接：https://juejin.cn/post/6844904035770695693
    来源：掘金

### async-await ###

async-await 只是 Promise+generator 的一种语法糖而已。

[_ SPA]: /images/20221004/c682fb961e0c4be29e21d88278129892.png