共计 3915 个字符，预计需要花费 10 分钟才能阅读完成。
本文作者：Cody Chan，题图来自 Jake Archibald
JavaScript 作为天生的单线程语言，社区常常聊 JavaScript 就聊异步、聊 Event Loop，看起来它们如同难舍难分，实际上可能只有五毛钱的关系。本文把这些串起来讲讲，心愿能给读者带来一些播种，如果能打消一些误会那就最好了。
须要强调的是，这类纯技术学习除了 SPEC 和 源码 其它都不是谨严的路径，这篇文章也不例外。
开始
网上常常充斥着所谓「前端八股文」，其中可能就有相似这样的题：
console.log(1);
setTimeout(() => console.log(2), 0);
new Promise(resolve => {console.log(3);
resolve();}).then(() => console.log(4));
console.log(5);这篇文章并不是为了解决下面的题，下面的题只有对 Event Loop 有过根本理解就能够作答。
写这个文章的激动来自于很久之前的一个纳闷：NodeJS 里既然有了 fs.readFile() 为什么还提供 fs.readFileSync()？
Engine 和 Runtime
严格来说，JavaScript 跟其它语言一样，是很单纯的，只是一份 SPEC。咱们当初看到的它的风貌很多是 Engine 和 Runtime 赋予的。
这里的 Engine 是指 JavaScript 引擎，比方常见的 V8 和 SpiderMonkey 等，它们次要工作就是翻译代码并执行（当然附带内存调配回收等）。下图是 V8 次要工作原理：
能够通过 这个 理解更多。
而 Runtime 是指各种浏览器及 NodeJS，它们提供了各种接口模块，整合 Engine 并按事件驱动中央式调度等。
比方上面的代码：
setTimeout(callback, ms);Engine 只是很纯正地翻译执行，跟看待任何一般函数一样：
myFun(arg1, arg2);Runtime 实现了 setTimeout 并把它放到了 window 或 global 上，至于外面的 callback 何时能够被执行的逻辑也是 Runtime 实现的，其实就是 Event Loop 机制。
局部参考自 这里，这些称说在不同语境下也不太一样，晓得怎么回事即可。
并发
并发和多线程常常会同时呈现，看起来 JavaScript 这种单线程语言在并发人造弱势，实则不然。
除了并发，还有个叫并行的概念，并行就是个别意义上多个工作同时进行，而并发是指多个工作 看起来像 是同时进行的。咱们个别很少须要关怀是否并行。
高效解决并发的实质是充分利用 CPU。
充分利用单核 CPU
对于 I/O 密集型利用，CPU 其实很闲的，可能大多时候就是无聊地期待。I/O 操作之间如果没有依赖，齐全能够并发地发动指令，再并发地响应后果，两头期待的工夫就能够省掉。
因为 CPU 解决的事足够简略，多线程干这个事体现就可能很蹩脚，花 100ms 切上下文，后果 CPU 只用了 10ms 就又切走了。所以 JavaScript 抉择了事件驱动的形式，也让它更善于 I/O 密集型场景。
充分利用多核 CPU
充分利用单核 CPU 是有下限的，充其量也仅仅是把 CPU 不必要的闲暇工夫（过程挂起）减为零。面对 CPU 密集型利用，就须要充分利用多核 CPU。
用户态过程是无奈间接调度 CPU 的，所以如果要充分利用多 CPU，只须要在用户态开多个过程（线程），操作系统会主动帮调度。
拿 Chrome 为例，看浏览器的 Task Manager，会发现每个 Tab 以及每个扩大都是 独立的过程，当然咱们还能够借助 Web Worker 手动开多个线程。
NodeJS 的话形式就多了：
- Child process：比拟罕用，能够 fork 一个子过程，也能够 spawn 执行系统命令；
- Worker threads：这个更轻，如名字，能够认为更 像线程，还能够通过 ArrayBuffer 等共享内存（数据）；
- Cluster：跟下面计划比起来 Cluster 更像是具体场景的解决方案，在作为 Web Server 提供服务时，如果 fork 多个过程，这就波及到通信以及 bind 端口被占用等问题，而这些 Cluster 都帮你解决了，驰名的 PM2 以及 EggJS 多过程模型都是基于此。
用户态并发
当然充分利用 CPU 也不是高枕无忧，还要合理安排咱们的工作！
对于那些工作有相互依赖的状况，比方 B 依赖 A 的后果，咱们个别是做完 A 再做 B，那如果是 B 局部依赖 A 呢？理论场景，A 是生产者且始终生产，B 是消费者且始终生产，这种单线程如何优雅实现呢？
答案是协程，在 JavaScript 里即 Generator 函数。实现上述过程的代码：
function* consumer() {while(true) {console.log('consumer'); yield p; }
}
function* provider() {while(true) {console.log('provider'); yield c; }
}
var c = consumer(), p = provider();
var current = p, i = 0;
do {current = current.next().value; } while(i++ < 10);所以 Generator（协程）作用只有一个，在用户态能够细粒度地管制工作的切换。至于应用 co 包裹后达到同步的成果那是另一件事了，仅仅是因为 co 利用这个控制能力在异步 callback 回来时能够手动复原到之前执行的地位继续执行。再深究的话你会发现即便 co 包裹后的 Generator 函数执行也是立刻返回的，也就是 Generator 函数并不能真的让异步变同步，顶多是把逻辑上有程序的代码在部分做到 看起来 同步。
JavaScript 因为本身限度，借助 Runtime 各种奇技淫巧还是比拟完满地解决了并发问题，然而回头看，还是不如那些人造反对多线程的语言来的优雅。多线程解决并发更像 React 借助 Virtual DOM 解决 UI 渲染，关注的问题是收敛的，而 JavaScript 这一套计划下来，会有种一直打补丁的感觉。
异步 I/O
咱们说同步和异步时，大多时候说的是 I/O 操作，而 I/O 操作个别是慢的，因为 I/O 操作会跟外部设备打交道，比方文件读写操作硬盘、网络申请操作网卡等。
所谓同步就是过程进行 I/O 操作时 从用户态看 是被阻塞了的，要么是始终挂起期待内核（I/O 底层由内核驱动）筹备数据，要么始终被动检查数据是否筹备好。这里为了便于了解，能够认为始终在查看。
从社会分工教训看，这类无聊反复的轮询工作不应该扩散在各个日常工作中（主线程），应该由其它工种（独立线程）批量做。留神，即便轮询工作交出去了，这部分工作也并没有凭空隐没，哪有什么岁月静好，不过是有人替你负重前行罢了。
当然，这些操作系统早就提供好整套解决方案了，因为不同操作系统会不一样，为了跨平台，就呈现了一些独立的库屏蔽这些差别，比方 NodeJS 重要组成部分的 libuv。
理论实际中并不是这么简略的，有时会联合 线程池，而且除了同步和异步，还有 其它维度。
Event Loop
下面提到的帮你负重前行的就是 Event Loop（及相干配套）。
这个开展说的话会须要十分长的篇幅，这里只是简略介绍。强烈建议看两个视频：
- In The Loop（国内地址）
- What the heck is the event loop anyway?（国内地址、可视化 DEMO）
如果没工夫看能够参照下图：
- JavaScript 单线程，Engine 保护了一个栈用于执行进栈的工作；
- 执行工作的过程可能会调用一些 Runtime 提供的异步接口；
- Runtime 期待异步工作（如定时器、Promise、文件 I/O、网络申请等）实现后会把 callback 扔到 Task Queue（如定时器）或 Microtask Queue（如 Promise）；
- JavaScript 主线程栈空了后 Microtask Queue 的工作会顺次扔到栈里执行，直到清空，之后会取出一个 Task Queue 里能够执行的工作扔到栈里执行；
- 周而复始。
因为不同 Runtime 机制不太一样，下面仅仅是个大略。
问题回顾
看下一开始的问题：NodeJS 里既然有了 fs.readFile()（异步）为什么还提供 fs.readFileSync()（同步）？
看起来很显著，同步的形式在期待后果返回前会挂起以后线程，也就是期间无奈继续执行栈里的指令，也无奈响应其它异步工作回调回来的后果。所以通常不举荐同步的形式，然而以下状况还是能够思考甚至举荐应用同步形式的：
- 响应工夫很短且可控；
- 无并发诉求，比方 CLI 工具；
- 通过其它形式开起来多个过程；
- 对后果准确性要求很高（可能有人好奇为什么异步的后果准确性不高，思考一个极其状况，在 I/O 实现响应，曾经在 Task Queue 期待被解决期间文件被删除了，咱们冀望的是报错，但后果会被当做胜利）。
总结
本文从一个问题登程，顺便带着回顾了 JavaScript 的并发、异步和事件循环，总结如下：
- JavaScript 语言层面是单线程的，它和 Engine 以及 Runtime 独特形成了咱们当初看到的样子；
- JavaScript 应用异步来解决 I/O 的并发场景；
- Runtime 通过 Web Worker、Child process 等形式能够创立多线程（过程）来充分利用多核 CPU；
- Event Loop 是实现异步 I/O 的一种计划（不惟一）。
最初，抛个问题，如果 JavaScript 提供了语言层面的创立多线程的形式，又会是怎么一番现象呢？
本文公布自 网易云音乐大前端团队，文章未经受权禁止任何模式的转载。咱们长年招收前端、iOS、Android，如果你筹备换工作，又恰好喜爱云音乐，那就退出咱们 grp.music-fe(at)corp.netease.com！