js事件循环机制

素颜马尾好姑娘i 2022-06-15 01:57 235阅读 0赞

> 事件循环（Event Loop）
> 
> 在js的运行环境中，我们这里光说浏览器吧，通常伴随着很多事件的发生，比如用户点击、页面渲染、脚本执行、网络请求，等等。为了协调这些事件的处理，浏览器使用事件循环机制。

# 事件循环机制 #

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。

当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为**事件队列**。（注意：任务队列有两个：微任务队列/宏任务队列）

被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。

如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。

这就是这个过程被称为“事件循环（Event Loop）”的原因。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

### **注意** ###

### 1.任务类型 微/宏 ###

*  macro-task(宏任务)：包括整体代码script，setTimeout，setInterval，setImmediate，UI rendering， I/O
 *  micro-task(微任务)：Promise.then，process.nextTick，MutationObserver回调，MessageChannel的onmessage回调

### 2.执行顺序 ###

*  promise构造函数里的函数为同步代码，立即执行
 *  微任务队列里 process.nextTick 的执行顺序永远在 promise.then 之前 process.nextTick >  promise.then 
 *  如果没有在一个I/O周期执行，那么setImmediate 和 setTimeout 执行顺序是不确定的。  
    如果在一个I/O周期执行，setImmediate总是优先于setTimeout执行。

### 3.一次事件循环 ###

①将 macro-task 里的同步代码立即执行，异步代码放入执行栈

\->  调用web API 多线程执行异步事件 -> 将事件回调放入 micro-task /macro-task

\-> ②执行栈空

\-> ③UI render (dom渲染)

\-> ④micro-task 不为空？ -> 将 micro-task 里的任务全部 放入 执行栈中执行

\-> ⑤执行栈空   **（一次事件循环）**

\-> ⑥macro-task 不为空？(开启下一次事件循环）

\-> 将 macro-task 里的任务按先入先出顺序 放一个 在执行栈中执行

\->.......

## 举个栗子 ##

//1
    console.log(1);
    //2
    new Promise(function (resolve) {
        console.log(2);
        resolve();
    }).then(function () {
        console.log(3)
    });
    //3
    setTimeout(function () {
        console.log(4);
        process.nextTick(function () {
            console.log(5);
        });
        new Promise(function (resolve) {
            console.log(6);
            resolve()
        }).then(function () {
            console.log(7)
        })
    });
    //4
    process.nextTick(function () {
        console.log(8)
    });
    //5
    setImmediate(function () {
        console.log(9);
        new Promise(function (resolve) {
            console.log(10);
            resolve()
        }).then(function () {
            console.log(11)
        });
        process.nextTick(function () {
            console.log(12);
        });
    })

以上程序的执行顺序如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1][]

最终的输出结果是：

1，2，8，3，4，6，5，7，9，10，12，11

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220615/250d4d99ec7a4e83a594a78595911c7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1]: /images/20220615/2699596111be47b6a6f3ae19447481cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2]: /images/20220615/fa909d958ce0412ea0b37d0a5df6aaa4.png