问题

1. 单线程如何做到异步

2. 事件循环的过程是怎么样的

3. 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

其中serImmediate和process.nextTick是nodejs的实现

事件处理过程

关于macrotask和microtask的理解，下面这张图介绍非常清楚：

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

1. 检查macrotask队列是否为空，非空则到2，为空则到3

2. 执行macrotask中的一个任务

3. 继续检查microtask队列是否为空，若有则为4，否则到5

4. 取出microtask中的任务执行，执行完成返回到步骤3

5. 取出视图更新

macrotask & microtask的执行顺序

下面一段代码感受：

控制台输出的log顺序是什么？下图分析：

首先，全局代码(main())压入调用栈执行，打印start，接下来setTimeout压入macrotask队列，promise.thrn回调放入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阶段。

一下代码可以验证