转载自: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，为空则到32. 执行macrotask中的一个工作3. 持续查看microtask队列是否为空，若有则到4，否则到54. 取出microtask中的工作执行，执行实现返回到步骤35. 执行视图更新

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的回调在重绘之前执行，没有确定的工夫，何时重绘由浏览器决定