Javascript基础系列之事件循环

事件循环（Event Loop）

规范中定义Event Loop如下

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers

为了协调事件、用户交互、脚本、UI渲染、网络请求等行为，用户引擎必须使用Event Loop。有两种Event Loop，一种是基于browsing contexts，另外一种是基于workers

Philip Roberts的演讲中Help, I’m stuck in an event-loop中一张图表示如下

EC_04.jpg

调用栈遇见DOM操作、ajax请求以及setTimout等WebAPIs的时候就会交给浏览器内核的其他模块进行处理，webkit内核在javascript执行引擎以外，有一个重要模块是webcore模块。对于图中WebAPIs提到的三种API，webcore分别提供了DOM binding、network、timer模块来底层实现 。等到这些模块处理玩这些操作的时候将回调函数任务异步队列中，之后等栈中的task执行完以后再去执行任务队列中的回掉函数

EC_03.jpg

• 同步的任务直接进入主执行栈（call stack）中执行
• 等待主执行栈中任务执行完毕，由Event Loop将任务推入主执行栈执行

task

一个事件循环可以有多个task队列

来自不同任务源的task会被放入不同的task对列：比如，用户代理会为键盘事件分配一个task对列，为其它事件分配另外的对列。

task的执行是根据进入事件决定的，先进队列先执行

task来源主要有以下几种

• script代码
• setTimeout/setInterval
• I/O
• UI交互
• setImmediate(nodejs环境中)

microtask

一个事件循环只有一个microtask队列，通常有以下几种

• promise（promise中then和catch才是microtask，本身内部代码不是）
• MutationObserver
• promise.nextTick(Nodejs中)

Event Loop工作过程

一个Event Loop主要存在就会不断执行下面过程

• 1.在所有的task队列中选择一个最早进入的队列的task，用户代理可以选择任何的task，如果没选择的话，就跳到6Microtask
• 2.将前一步选择的task设置为currently running task
• run：运行被选择的task
• 运行结束后，将Event Loop中的currently running task设置为null
• 从task队列里移除前边run里运行的task
• Microtask：执行microtask中的所有任务
• 更新渲染
• 如果这是一个work event loop，但是task队列中没有任务，并且WorkerGlobalScope对象的closing标识符为true，则销毁Event Loop，中止这些步骤，然后run a work
• 返回第一步

其实就是说，Event Loop执行的时候就是每次执行一个task任务（宏任务），然后运行所有的微任务，以此循环下去

下面示例代码

setTimeout(() => console.log('setTimeout1'), 0);
setTimeout(() => {
    console.log('setTimeout2');
    Promise.resolve().then(() => {
        console.log('promise2');
        Promise.resolve().then(() => {
            console.log('promise3');
        })
        console.log(5)
    })
    setTimeout(() => console.log('setTimeout4'), 0);
}, 0);
setTimeout(() => console.log('setTimeout3'), 0);
Promise.resolve().then(() => {
    console.log('promise1');
})

结果如下

promise1
setTimeout1
setTimeout2
promise2
5
promise3
setTimeout3
setTimeout4