浏览器event loop和node.js event loop解析

1、为什么要异步？

JavaScript 是单线程的，也就是说同一时刻只可以处理一个任务。通过异步才可以高效率处理各种并发情况。细想，假如浏览器是同步的，那么用户体验肯定极差。比如你打开一个视频网站，假如不是异步请求视频流的话，你必须等到视频全部加载完毕才可以看，这样你肯定不耐烦，简直是等着黄花菜都凉的节奏啊。再举一个通俗易懂的例子来说明，假如你去银行柜台取钱，到银行发现，前面正好有一个满脸纹身的彪形大汉在办业务，这大汉脑子简单，四肢发达，半天说不清楚自己办的业务类型。而你又要急着和如花去约会。重点来了，如果只有“同步”的话，你肯定只能等着大汉办完业务，你才能办。这样你就等着如花离你而去吧。恰好，今天营业厅服务进行创新，柜台办理可以支持“异步”了。柜台工作人员和你说，“小伙子，你先和如花约会去吧，约完回来，我电话通知你”。你一想，有道理。于是就先和如花约会去了。这样你就不需要等着彪形大汉办完业务后办理业务了，你可以先和如花约完会后，再继续办理业务。这就是“异步”，明显效率提升，既办完了业务也和如花成功见面约会，什么都没耽误。

接下来，就阐述一下，浏览器通过“异步”提高效率。

2、 浏览器事件环（event loop）

说到浏览器事件环，就不得不引用一张图片来阐述

通过上图，我们可以看出浏览器在执行js脚本时候，首先是把当前执行栈中的代码（同步代码）全部执行完毕。执行完毕后，开始执行异步的callback函数代码。而这些异步的callback函数都放在callback queue里面，这样再把callback queue里面的内容放到执行栈中执行。这样就形成了一个环路，即loop。也就是浏览器事件环的顺序是 当前执行栈--->微任务--->宏任务。

3、node.js 事件环（event loop）

接下来，开始阐述node.js的事件环。 当 Node.js 启动时，会做以下这几件事： a、初始化 event loop b、开始执行脚本（或者进入 REPL，本文不涉及 REPL）。这些脚本有可能会调用一些异步 API、设定计时器或者调用 process.nextTick() c、开始处理 event loop

事件环如下图:

如上图，node.js中的微任务是在状态切换的时候执行的，也就是说当从状态1切换到状态2的过程时候，如果有微任务，那么先要把微任务清空。然后，向下执行。

4、 宏任务和微任务

常见的宏任务和微任务： 1、macro-task(宏任务): setTimeout, setInterval, setImmediate, I/O 2、micro-task(微任务):process.nextTick, 原生Promise(有些实现的promise将then方法放到了宏任务中),Object.observe(已废弃), MutationObserver

5、举例

console.log('script start');

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

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

console.log('script end');

复制代码

浏览器中的运行结果是：

1

2

setTimeout1

promise

setTimeout2

node中的运行结果：

1

2

setTimeout1

setTimeout2

promise