理解 Node.js 事件循环
yushenmo
8年前
<p>本文介绍了 Node.js 事件循环是如何工作，如何使用 Node.js 构建高速应用。文章还会涉及最常见的一些问题及其解决方案。</p> <p>Node.js at Scale系列：我们正在编写一系列文章，聚焦于那些大规模使用 Node.js 的公司、有一定 Node 基础的开发者们的需求。</p> <p>Node.js at Scale 系列章节:</p> <ul> <li> <p>使用 npm</p> <ul> <li> <p>npm 技巧与最佳实践</p> </li> <li> <p>语义化版本和模块发布</p> </li> <li> <p>理解 Module System、CommonJS 和 require</p> </li> </ul> </li> <li> <p>深入 Node.js 底层</p> <ul> <li> <p>Node.js 事件循环 ( <strong>正是本文</strong> )</p> </li> <li> <p>垃圾回收</p> </li> <li> <p>编写元素模块</p> </li> </ul> </li> <li> <p>Building</p> <ul> <li> <p>Node.js 应用结构</p> </li> <li> <p>代码整洁之道</p> </li> <li> <p>异步处理</p> </li> <li> <p>事件源（Event sourcing）</p> </li> <li> <p>命令查询与责任隔离</p> </li> </ul> </li> <li> <p>Testing</p> <ul> <li> <p>单元测试</p> </li> <li> <p>E2E 测试</p> </li> </ul> </li> <li> <p>生产环境的 Node.js</p> <ul> <li> <p>应用监控</p> </li> <li> <p>应用调试</p> </li> <li> <p>应用分析</p> </li> </ul> </li> <li> <p>微服务</p> <ul> <li> <p>请求签名（Request Signing）</p> </li> <li> <p>分布式跟踪（Distributed Tracing）</p> </li> <li> <p>API 网关（API Gateways）</p> </li> </ul> </li> </ul> <h2><strong>问题提出</strong></h2> <p>多数网站后端是不需要进行复杂运算的。程序多数时间都在等待进行硬盘读写，等待网络传输信息、返回答复。</p> <p>IO 操作可能比数据处理要慢几个数量级。举个例子，SSD 可以达到 200-730 MB/s —— 至少高端 SSD 可以达到。读取 1KB 数据仅需 1.4ms，但在这段时间中，主频 2GHz 的 CPU 可以进行 28,000 次指令处理周期。</p> <p>对网络通信来说，情况还可能更糟糕，ping 下 google.com 试试看：</p> <pre> <code class="language-javascript">$ ping google.com 64 bytes from 172.217.16.174: icmp_seq=0 ttl=52 time=33.017 ms 64 bytes from 172.217.16.174: icmp_seq=1 ttl=52 time=83.376 ms 64 bytes from 172.217.16.174: icmp_seq=2 ttl=52 time=26.552 ms 64 bytes from 172.217.16.174: icmp_seq=3 ttl=52 time=40.153 ms 64 bytes from 172.217.16.174: icmp_seq=4 ttl=52 time=37.291 ms 64 bytes from 172.217.16.174: icmp_seq=5 ttl=52 time=58.692 ms 64 bytes from 172.217.16.174: icmp_seq=6 ttl=52 time=45.245 ms 64 bytes from 172.217.16.174: icmp_seq=7 ttl=52 time=27.846 ms</code></pre> <p>平均延时为 44ms。数据包在网络上一个来回，前面提到的处理器可以执行 8800 万次周期。</p> <h2><strong>解决方案</strong></h2> <p>多数操作系统都提供了某种类型的异步 IO 接口，在允许我们在处理那些不依赖于通信结果的数据之外，通信还能继续...</p> <p>如今，它主要是通过利用，在额外的软件复杂度的成本。</p> <p>数种方式可以达到此目的。如今的完成方式，主要是以额外的软件复杂性为代码，挖掘多线程潜力。比方说，在 Java 或 Python 中，文件读取是阻塞操作。在等待网络/硬盘通信（network/disk communication）完成时，程序无法做任何其他工作。我们能做的 —— 至少在 Java 中是如此 —— 只能是启动新的线程，然后在操作完成后通知主线程。</p> <p>既枯燥又复杂，但能完成任务。那 Node 是怎样的呢？好吧，因为 Node.js（更准确的说是 V8） 是单线程的，我们肯定也会遇到同样的问题。我们代码只能在一个线程中运行。</p> <p>编者按: 这里所说的并非完全正确。Java 和 Python 都有异步接口，但使用起来要比 Node.js 麻烦得多。</p> <p>也许你知道，有时候，在浏览器中用 setTimeout(someFunction, 0) 能够神奇地解决一些问题。可是为什么将超时时间设置为 0，将执行延迟 0ms 就能解决问题？难道和立即调用 someFunction 不是一回事吗？并非如此。</p> <p>首先，来看看调用栈（call stack），又简称作“栈”。我会尽量将问题简化，因为我们只需要理解调用栈的最基本概念。如果你对此已经熟悉，请直接。</p> <h2><strong>调用栈</strong></h2> <p>调用一个函数时，返回地址（return address）、参数（arguments）、本地变量（local variables）等都会被推入栈中。如果在当前正在运行的函数中调用另一个函数，则该函数的相关内容也会以同样的方式推到栈顶。</p> <p>为行文简便，接下来我将使用“函数被推入栈顶”这样不太准确的表达。</p> <p>来看看吧！（ 译者注：下面的示意图中的一些地方将 square 误作 sqrt ，请根据代码甄别。 ）</p> <pre> <code class="language-javascript">function main () { const hypotenuse = getLengthOfHypotenuse(3, 4) console.log(hypotenuse) } function getLengthOfHypotenuse(a, b) { const squareA = square(a) const squareB = square(b) const sumOfSquares = squareA + squareB return Math.sqrt(sumOfSquares) } function square(number) { return number * number } main()</code></pre> <p>首先调用 main 函数：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8e479446e4d08ac83bcf694ef357c590.png"></p> <p>紧接着以 3 和 4 为参数，调用 getLengthOfHypotenuse 函数：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/569d3535d2bf01dabcaf3d1f5ff942f3.png"></p> <p>然后是 square(a) ：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/845dcbba3e6801262cfc6b8d34f2d38c.png"></p> <p>square(a) 返回后，从栈中弹出，其返回值赋值给 squareA 。然后 squareA 被添加到 getLengthOfHypotenuse 的调用帧中：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/68f5faa56cd424a4939538b4cf67e29b.png"></p> <p>下面计算 square(b) 也是一样：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/99af19f877f3c0bb1fc58d1757965336.png"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4abafea26fde1d1b3fdc9282a72aa20f.png"></p> <p>下一行是表达式 squareA + squareB 求值：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2a174a1b2b0f44595da51942e5986e8b.png"></p> <p>计算 Math.sqrt(sumOfSquares) :</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9c280277231d0985927c6f762a0a866f.png"></p> <p>现在 getLengthOfHypotenuse 剩下的工作就是将计算的最终结果返回：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/16252c25ba0c0e26c86e4ce2c9ae828e.png"></p> <p>getLengthOfHypotenuse 返回值被赋值给 main 中的 hypotenuse ：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a3b25ca0326cbe86a3365267c5f3427f.png"></p> <p>控制台打印出 hypotenuse ：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/88b042418a6821152eb08dcf65e184ff.png"></p> <p>然后， main 返回，不带任何值，并从栈中弹出，栈变为空。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3f91f8cae27782af17f95dd422ed21e9.png"></p> <p>注意： 上面提到函数执行完毕后，本地变量从栈中弹出。这仅对 Number、String、Boolean 等基本类型的值成立。对象、数组等值位于堆（heap）中，变量只是指向它们的指针。传递的变量其实只是指针，让这些值在不同的栈帧中可变化。当函数从栈中弹出后，只有指针弹出，而实际值依然还在堆中。当对象失去作用后，由垃圾回收器释放空间。</p> <h2><strong>事件循环</strong></h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/16caae457196808997e90025e61d2c38.gif"></p> <p>不不不，不是这种循环。 :)</p> <p>所以，当我们调用 setTimeout 、 http.get 、 process.nextTick 或 fs.readFile 这样一些东西时，到底发生了什么？V8 代码没有这些，但 Chrome WebApi 和 Node.js 的 C++ API 中有。要了解它们，我们得更好地理解执行顺序。</p> <p>看看一个更一般的 Node.js 应用 —— 监听 localhost:3000/ 的服务器。收到请求时，服务器会在控制台上打印一些消息，请求 wttr.in/ ，然后将接收的响应转发给请求者。</p> <pre> <code class="language-javascript">'use strict' const express = require('express') const superagent = require('superagent') const app = express() app.get('/', sendWeatherOfRandomCity) function sendWeatherOfRandomCity (request, response) { getWeatherOfRandomCity(request, response) sayHi() } const CITIES = [ 'london', 'newyork', 'paris', 'budapest', 'warsaw', 'rome', 'madrid', 'moscow', 'beijing', 'capetown', ] function getWeatherOfRandomCity (request, response) { const city = CITIES[Math.floor(Math.random() * CITIES.length)] superagent.get(`wttr.in/${city}`) .end((err, res) => { if (err) { console.log('O snap') return response.status(500).send('There was an error getting the weather, try looking out the window') } const responseText = res.text response.send(responseText) console.log('Got the weather') }) console.log('Fetching the weather, please be patient') } function sayHi () { console.log('Hi') } app.listen(3000)</code></pre> <p>请求 localhost:3000 时，除了获取天气，还有哪些内容打印出来？</p> <p>如果你在 Node 方面有些经验，肯定不会惊讶：在代码中，尽管调用 console.log('Fetching the weather, please be patient') 在 console.log('Got the weather') 之后，当前者会先打印出来：</p> <pre> <code class="language-javascript">Fetching the weather, please be patient Hi Got the weather</code></pre> <p>发生了什么？就算 V8 是单线程的，Node 底层的 C++ API 并不是啊。这意味着，无论何时调用非阻塞的操作，Node 会在底层调用一些和 JavaScript 代码同时运行的代码。一旦该隐藏线程接收到等待的值或者抛出错误，就会传入必要参数，调用提供的回调。</p> <p>注意： 上面所谓的“一些和 JavaScript 代码同时运行的代码”，实际上是 libuv 的一部分。libuv 是处理线程池的开源库，用于处理信号，以及异步任务执行所必要的其他东西。一开始是为 Node.js 开发的，不过目前也有 很多其他项目 在使用。</p> <p>为了深入底层，我们需要引入两个新概念：事件循环（event loop）和任务队列（task queue）。</p> <h3><strong>任务队列</strong></h3> <p>Javascript 是单线程、事件驱动型语言。这意味着，我们可以为事件添加监听器，当某一事件触发时，监听器执行提供的回调。</p> <p>调用 setTimeout 、 http.get 或 fs.readFile 时，Node.js 将这些操作发送到另外一个线程，允许 V8 继续执行代码。计时完毕或 IO/http 操作完成后，Node 还会调用回调函数。</p> <p>然后这些回调也可以将其他任务入列，其余亦可依此类推。这样，在处理请求时还能读取文件，并根据读取的内容发送 http 请求，而不会阻塞正在处理的其他请求。</p> <p>尽管如此，我们只有一个主线程加一个调用栈，所以为避免在读取那个文件时又去处理另一个请求，回调函数需要等待调用栈变空。回调函数等待执行的中间状态被称为任务队列（又称作事件队列、消息队列）。一旦主线程结束此前工作，回调函数就会在一个无限循环当中被调用，因此叫作“事件循环”。（译者注：附原文如下）</p> <p>However, we only have one main thread and one call-stack, so in case there is another request being served when the said file is read, its callback will need to wait for the stack to become empty. The limbo where callbacks are waiting for their turn to be executed is called the task queue (or event queue, or message queue). Callbacks are being called in an infinite loop whenever the main thread has finished its previous task, hence the name 'event loop'.</p> <p>在上一个例子中，事件循环大概如下所述：</p> <ol> <li> <p>express 为“request”事件注册了一个处理程序，请求 “/” 时会被调用；</p> </li> <li> <p>跳过函数，开始监听 3000 端口；</p> </li> <li> <p>调用栈为空，等待“request”事件触发；</p> </li> <li> <p>请求到来，等待已久的事件触发，express 调用 sendWeatherOfRandomCity ；</p> </li> <li> <p>sendWeatherOfRandomCity 入栈；</p> </li> <li> <p>getWeatherOfRandomCity 被调用并入栈；</p> </li> <li> <p>调用 Math.floor 和 Math.random ，入栈、出栈， cities 中的某一个被赋值给 city ；</p> </li> <li> <p>传入 'wttr.in/${city}' 调用 superagent.get ，为 end 事件设置处理回调；</p> </li> <li> <p>发送 http://wttr.in/${city} http 请求到底层线程，继续向下执行；</p> </li> <li> <p>控制台打印 'Fetching the weather, please be patient' ， getWeatherOfRandomCity 函数返回；</p> </li> <li> <p>调用 sayHi ，控制台打印 'Hi' ；</p> </li> <li> <p>sendWeatherOfRandomCity 函数返回、出栈，调用栈变空；</p> </li> <li> <p>等待 http://wttr.in/${city} 发送响应；</p> </li> <li> <p>一旦响应返回， end 事件触发；</p> </li> <li> <p>传给 .end() 的匿名回调函数调用，带着其闭包内所有变量一起入栈，也就是说，其内部能够访问、修改 express, superagent, app, CITIES, request, response, city 以及我们定义的函数；</p> </li> <li> <p>调用 response.send() ，状态码为 200 或 500 ，再次发送到底层线程，response stream 不会阻塞代码执行，匿名回调出栈。</p> </li> </ol> <p>这样我们就能理解一开始提到的 setTimeout hack 是如何工作的。尽管将时间设置为 0，但是会延迟到当前栈和任务队列为空后执行，以允许浏览器重新绘制 UI，或 Node 处理其他请求。</p> <h3><strong>Microtask 与 Macrotask</strong></h3> <p>实际上，不止一个任务队列，microtask（小型任务） 与 macrotask（巨型任务）各有一个任务队列。</p> <p>Microtask 如：</p> <ul> <li> <p>process.nextTick</p> </li> <li> <p>promises</p> </li> <li> <p>Object.observe</p> </li> </ul> <p>Macrotask 如：</p> <ul> <li> <p>setTimeout</p> </li> <li> <p>setInterval</p> </li> <li> <p>setImmediate</p> </li> <li> <p>I/O</p> </li> </ul> <p>看看下面的代码：</p> <pre> <code class="language-javascript">console.log('script start') const interval = setInterval(() => { console.log('setInterval') }, 0) setTimeout(() => { console.log('setTimeout 1') Promise.resolve().then(() => { console.log('promise 3') }).then(() => { console.log('promise 4') }).then(() => { setTimeout(() => { console.log('setTimeout 2') Promise.resolve().then(() => { console.log('promise 5') }).then(() => { console.log('promise 6') }).then(() => { clearInterval(interval) }) }, 0) }) }, 0) Promise.resolve().then(() => { console.log('promise 1') }).then(() => { console.log('promise 2') })</code></pre> <p>控制台结果如下：</p> <pre> <code class="language-javascript">script start promise1 promise2 setInterval setTimeout1 promise3 promise4 setInterval setTimeout2 setInterval promise5 promise6</code></pre> <p>按照 <a href="/misc/goto?guid=4959724851937403474" rel="nofollow,noindex">WHATWG</a> 规范，每一次事件循环（one cycle of the event loop），只处理一个 (macro)task。待该 macrotask 完成后，所有的 microtask 会在同一次循环中处理。处理这些 microtask 时，还可以将更多的 microtask 入队，它们会一一执行，直到整个 microtask 队列处理完。</p> <p>下图展示得更加清楚：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b4f3e83fe6393ab9535062d423d1a075.png"></p> <p>在上面的例子中：</p> <p>Cycle 1:</p> <ol> <li> <p>setInterval 加入 macrotask 队列；</p> </li> <li> <p>setTimeout 1 加入 macrotask 队列；</p> </li> <li> <p>Promise.resolve 1 中，两个 then 加入 microtask 队列；</p> </li> <li> <p>调用栈变空，microtask 执行。</p> </li> </ol> <p>Macrotask queue: setInterval , setTimeout 1</p> <p>Cycle 2:</p> <ol> <li>microtask 队列为空， setInteval 回调执行，又一个 setInterval 加入 macrotask 队列，正好位于 setTimeout 1 之后；</li> </ol> <p>Macrotask queue: setTimeout 1 , setInterval</p> <p>Cycle 3:</p> <ol> <li> <p>microtask 队列为空， setTimeout 1 回调执行， promise 3 和 promise 4 加入 microtask 队列；</p> </li> <li> <p>promise 3 和 promise 4 执行， setTimeout 2 加入 macrotask 队列；</p> </li> </ol> <p>Macrotask queue: setInterval , setTimeout 2</p> <p>Cycle 4:</p> <ol> <li>microtask 队列为空， setInteval 回调执行，另一个 setInterval 加入 macrotask 队列，正好位于 setTimeout 2 之后；</li> </ol> <p>Macrotask queue: setTimeout 2 , setInteval</p> <ol> <li>setTimeout 2 回调执行， promise 5 和 promise 6 加入 microtask 队列；</li> </ol> <p>紧接着， promise 5 和 promise 6 的处理程序会清除 interval，但奇怪的是， setInterval 还是运行了一次。不过，如果在 Chrome 中运行代码，结果和预期是一致的。</p> <p>译者注：笔者实际测试发现，情况可能和上面的叙述有所不同。Node v5.12 执行的结果是符合预期的。而 Chrome 53 上，反而出现一些状况， promise 4 之后， setInterval 执行了两次，原因未详，有待进一步追踪（disqus 评论被墙，我的 V*N 也没戏）。</p> <p>使用 process.nextTick 和一些嵌套回调，在也 Node 中也能修复问题：</p> <pre> <code class="language-javascript">console.log('script start') const interval = setInterval(() => { console.log('setInterval') }, 0) setTimeout(() => { console.log('setTimeout 1') process.nextTick(() => { console.log('nextTick 3') process.nextTick(() => { console.log('nextTick 4') setTimeout(() => { console.log('setTimeout 2') process.nextTick(() => { console.log('nextTick 5') process.nextTick(() => { console.log('nextTick 6') clearInterval(interval) }) }) }, 0) }) }) }) process.nextTick(() => { console.log('nextTick 1') process.nextTick(() => { console.log('nextTick 2') }) })</code></pre> <p>这和上面的逻辑基本一样，只是看起来比较可怕。至少工作按照预期完成了。</p> <h3><strong>驯服异步怪兽！</strong></h3> <p>如前所见，在编写 Node.js 应用时，需要管理、留心两个任务队列和事件循环 —— 如果想要发挥它们全部的理力量，如果需要避免耗时任务阻塞主线程。</p> <p>事件循环的概念一开始可能不太好掌握，一旦掌握之后就再也离不开了。可能导致回调地狱的延续传递风格看起来很丑，不过我们有 Promise，很快还有 async-await 在手... 在等待 async-await 的时候，还可以使用 co 、 koa 这些工具。</p> <p>最后一点建议：</p> <p>了解了 Node.js 和 V8 如何处理长时间任务，可以开始尝试使用。你之前可能听说过，应当将耗时循环放入任务队列。可以手动去做，或者借助 async.js 。</p> <p> </p> <p>来自：http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack-1652.html</p> <p> </p>