乐趣区

关于javascript:事件循环机制event-loop

jiezi

转载自:http://lynnelv.github.io/js-e…

抛在后面的问题：

  • 单线程如何做到异步
  • 事件循环的过程是怎么的
  • macrotask 和 microtask 是什么，它们有何区别

单线程和异步

提到 js，就会想到 单线程 ， 异步，那么单线程是如何做到异步的呢？概念后行，先要理解下单线程和异步之间的关系。

js 的工作分为 同步 和 异步 两种，它们的解决形式也不同， 同步工作 是间接在主线程上排队执行，异步工作 则会被放到工作队列中，若有多个工作（异步工作）则要在工作队列中排队期待，工作队列相似一个缓冲区，工作下一步会被移到 调用栈（call stack），而后主线程执行调用栈的工作。

单线程是指 js 引擎中负责解析执行 js 代码的线程只有一个（主线程），即每次只能做一件事，而咱们晓得一个 ajax 申请，主线程在期待它响应的同时是会去做其它事的，浏览器先在事件表注册 ajax 的回调函数，响应回来后回调函数被增加到工作队列中期待执行，不会造成线程阻塞，所以说 js 解决 ajax 申请的形式是异步的。

总而言之，查看调用栈是否为空，以及确定把哪个 task 退出调用栈的这个过程就是 事件循环，而js 实现异步的外围就是事件循环。

调用栈和工作队列

顾名思义，调用栈是一个栈构造，函数调用会造成一个栈帧，帧中蕴含了以后执行函数的参数和局部变量等上下文信息，函数执行完后，它的执行上下文会从栈中弹出。

下图就是调用栈和工作队列的关系图

事件循环

对于事件循环，HTML 标准的介绍

There must be at least one event loop per user agent, and at most one event loop per unit of related similar-origin browsing contexts.
An event loop has one or more task queues.
Each task is defined as coming from a specific task source.

从标准了解，浏览器至多有一个事件循环，一个事件循环至多有一个工作队列（macrotask），每个外工作都有本人的分组，浏览器会为不同的工作组设置优先级。

macrotask & microtask

标准有提到两个概念，但没有具体介绍，查阅一些材料大略可总结如下：

macrotask：蕴含执行整体的 js 代码，事件回调，XHR 回调，定时器（setTimeout/setInterval/setImmediate），IO 操作，UI render

microtask：更新应用程序状态的工作，包含 promise 回调，MutationObserver，process.nextTick，Object.observe

其中 setImmediate 和process.nextTick是 nodejs 的实现，在 nodejs 篇会具体介绍。

事件处理过程

对于 macrotask 和microtask的了解，光这样看会有些艰涩难懂，联合事件循坏的机制了解清晰很多，上面这张图能够说是介绍得十分分明了。

总结起来，一次事件循环的步骤包含：

1. 查看 macrotask 队列是否为空，非空则到 2，为空则到 3
2. 执行 macrotask 中的一个工作
3. 持续查看 microtask 队列是否为空，若有则到 4，否则到 5
4. 取出 microtask 中的工作执行，执行实现返回到步骤 3
5. 执行视图更新

mactotask & microtask 的执行程序

crotask.png)

读完这么多水灵灵的概念介绍，还不如看一段代码感触下

console.log('start')

setTimeout(function() {console.log('setTimeout')
}, 0)

Promise.resolve().then(function() {console.log('promise1')
}).then(function() {console.log('promise2')
})

console.log('end')

打印台输入的 log 程序是什么？联合上述的步骤剖析，系不系 so easy~

首先，全局代码（main()）压入调用栈执行，打印start；

接下来 setTimeout 压入 macrotask 队列，promise.then 回调放入 microtask 队列，最初执行 console.log(‘end’)，打印出end；

至此，调用栈中的代码被执行实现，回顾 macrotask 的定义，咱们晓得全局代码属于 macrotask，macrotask 执行完，那接下来就是执行 microtask 队列的工作了，执行 promise 回调打印promise1；

promise 回调函数默认返回 undefined，promise 状态变为 fullfill 触发接下来的 then 回调，持续压入 microtask 队列，event loop 会把以后的 microtask 队列始终执行完，此时执行第二个 promise.then 回调打印出promise2；

这时 microtask 队列曾经为空，从下面的流程图能够晓得，接下来主线程会去做一些 UI 渲染工作（不肯定会做），而后开始下一轮 event loop，执行 setTimeout 的回调，打印出setTimeout；

这个过程会一直反复，也就是所谓的 事件循环。

视图渲染的机会

回顾下面的事件循环示意图，update rendering（视图渲染）产生在本轮事件循环的 microtask 队列被执行完之后，也就是说执行工作的耗时会影响视图渲染的机会。通常浏览器以每秒 60 帧（60fps）的速率刷新页面，据说这个帧率最适宜人眼交互，大略 16.7ms 渲染一帧，所以如果要让用户感觉顺畅，单个 macrotask 及它相干的所有 microtask 最好能在 16.7ms 内实现。

但也不是每轮事件循环都会执行视图更新，浏览器有本人的优化策略，例如把几次的视图更新累积到一起重绘，重绘之前会告诉 requestAnimationFrame 执行回调函数，也就是说 requestAnimationFrame 回调的执行机会是在一次或屡次事件循环的 UI render 阶段。

以下代码能够验证

setTimeout(function() {console.log('timer1')}, 0)

requestAnimationFrame(function(){console.log('requestAnimationFrame')
})

setTimeout(function() {console.log('timer2')}, 0)

new Promise(function executor(resolve) {console.log('promise 1')
    resolve()
    console.log('promise 2')
}).then(function() {console.log('promise then')
})

console.log('end')

运行后果截图如下

能够看到，后果 1 中 requestAnimationFrame() 是在一次事件循环后执行，而在后果 2，它的执行则是在三次事件循环完结后。

总结

  1. 事件循环是 js 实现异步的外围

  2. 每轮事件循环分为 3 个步骤：

    a) 执行 macrotask 队列的一个工作
    b) 执行完以后 microtask 队列的所有工作
    c) UI render

  3. 浏览器只保障 requestAnimationFrame 的回调在重绘之前执行，没有确定的工夫，何时重绘由浏览器决定
退出移动版