Node.jsの設計をつらつらと概観する

株式会社Global Mobility ServiceでソフトウェアエンジニアのインターンをさせてもらっているShirubaです。グローバルな環境で利用されている社会的サービスの開発の一端を担いたい志ある方は、ぜひ緩くお話ししましょう〜。バックエンドはNode.jsを使っています。🙋‍♂️→ [採用ページ](https://www.wantedly.com/companies/company_8204706/projects)

-----

Node.jsについて色々資料を読んでメモをとったりしていたので、一度まとめておきたくて、この記事を書くことにしました。V8やLibuvなど低レイヤ技術の設計をベースにNode.jsを概観していきます。


# Node.jsとは

![1180px-Node.js_logo.svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/bee02d2b-a5a3-2037-db9c-502196d45e2e.png)

Node.js公式によるNode.jsの定義は以下です。

> Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。
https://nodejs.org/ja/about/

Node.jsを理解する上で重要な特徴を定義から抽出すると、以下の3つです。

- スケーラブル
- 非同期型
- イベント駆動

この3つの特徴については後で触れていきます。

# Node.jsの内部構造

![1*-0Sa0i_g-gcL9sJqvecKEw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/c9639f81-30e4-07ef-aba2-2f3794df7e1f.png)
画像引用：https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810

Node.jsは、いくつかのモジュールを組み合わせて構成されています。Node.jsを理解する上で重要なのは「V8」と「Libuv」です。この2つが、サーバーサイドでのJavascript実行環境を作っています。（クライアントサイドでは、chrome組み込みのv8とhtml5（イベントループ等を提供）でJavascript実行環境が実現されているそう。）

## V8

![1024px-V8_JavaScript_engine_logo_2.svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/c15cd54d-ee52-2c58-45ac-3c27f48e6970.png)

どうでもいいですが、V8の読み方は「ヴィーエイト」です。謎に「ブイハチ」って読んでた自分を恥じたい。

V8の定義を公式から引用します。

> V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.
https://v8.dev

- V8っていうのは、Javascript Engineを指します。要するに、Javascriptで書かれているソースコードを受け取って、機械語に変換してOS上で実行してくれるのがV8です。
- chromeとnode.jsはJavascript EngineとしてV8を採用していますが、それ以外は違います。例えばSafariではV8ではなくJavascriptCoreを採用しています。

ちなみに、EngineだとかRuntimeだとか単語がややこしいのですが、Javascript Engine、 Javascript Runtime、A compiler、Virtual Machineは全てV8を指すと考えて良いそうです。（参考：https://www.youtube.com/watch?v=PsDqH_RKvyc）

また、V8の定義に「ECMAScript」という単語が入っているので定義を引用しておきます。

> ECMAScript（エクマスクリプト）は、JavaScriptの標準であり、Ecma Internationalのもとで標準化手続きなどが行われている。
引用：https://ja.wikipedia.org/wiki/ECMAScript

要するに、Javascirptの文法の標準がECMAScriptです。「（Javacsriptで書かれている）ソースコードが何を意味しているのか」を表します。V8が受け取る、Javascriptで書かれているソースコードは極論ただのテキストの塊です。V8は、Javascriptで書かれたソースコードをECMAScriptを用いて解析しています。

V8を理解していなくてもNode.jsのアーキテクチャは理解できるので、V8は後回しにして、この記事の最後で見ていきます。

## Libuv

![20190111205332.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/62074c02-f6b0-f299-741f-45241e1fc930.png)

Libuvの定義を引用します。

> libuv is a multi-platform support library with a focus on asynchronous I/O. It was primarily developed for use by Node.js, but it’s also used by Luvit, Julia, pyuv, and others.
引用：http://docs.libuv.org/en/v1.x/#overview

非同期I/Oは、OSごとに実現方法が異なります。epollを使うOSがあったり、kqueueを使うOSがあったり。（非同期I/Oについては後述。）そこでepollやkqueueなど低レイヤの技術を抽象化したインタフェースを作って、OSを気にすることなく非同期I/Oを使えるようにしようとして作られたのがLibuvです。

Libuvの内部は以下のようにデザインされています。

![architecture-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/02f6ac2b-6198-7e1f-d961-e9f109b24dc8.png)
画像引用：http://docs.libuv.org/en/v1.x/design.html#design-overview

ちなみにNode.jsで使われているイベントループを提供してくれているのもLibuvです。

## Node.js Bindings

これは、概念的なものです。

v8やlibuvはc++で書かれている一方で、Node.jsを使ってapplicationを作るときに私たちはjavascriptを用います。これがNode.jsの旨みでもあるのですが、私たちはJavascriptで開発しているのに、内部的にはc++で記述されているv8とかlibuvを利用できるのです。

このJavascriptと他のプログラミング言語の橋渡しをしているのがNode.js Bindingsです。

ちなみにNode.js Bindingsは、「Language Bindings」のことを指しています。ということで、「Language Bindings」の定義をwikipediaから引用します。

> In computing, a binding is an application programming interface (API) that provides glue code specifically made to allow a programming language to use a foreign library or operating systemservice (one that is not native to that language).
Binding generally refers to a mapping of one thing to another. In the context of software libraries, bindings are wrapper libraries that bridge two programming languages, so that a library written for one language can be used in another language.[1] Many software libraries are written in system programming languages such as C or C++. To use such libraries from another language, usually of higher-level, such as Java, Common Lisp, Scheme, Python, or Lua, a binding to the library must be created in that language, possibly requiring recompiling the language's code, depending on the amount of modification needed.[2] However, most languages offer a foreign function interface, such as Python's and OCaml's ctypes, and Embeddable Common Lisp's cffi and uffi.[3][4][5]
https://en.wikipedia.org/wiki/Language_binding

Node.js Bindingsについて詳しくは触れませんが、[Internals of Node- Advance node ✌️](https://medium.com/front-end-weekly/internals-of-node-advance-node-%EF%B8%8F-8612f6a957d7)が面白かったです。

## コアモジュール

Node.jsには組み込みのコアモジュールというものが存在します。コアモジュールは沢山あるので、それぞれの重要度とかは[Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方](https://employment.en-japan.com/engineerhub/entry/2019/08/08/103000#パフォーマンス向上NodejsのデザインパターンやCore-APIの仕様を理解する)を参考にされたし。

# サーバのアーキテクチャ

Node.jsの内部を雑に見渡したところで、Node.jsの設計を見ていきます。
Node.jsで特徴的なのが、採用しているサーバアーキテクチャです。

サーバーのアーキテクチャには、一般的に「Thread Based」と「Event Driven」があります。Node.jsの採用しているサーバアーキテクチャは「Event Driven」、つまり「イベント駆動型」です。（参考：[Server Architectures](https://berb.github.io/diploma-thesis/community/042_serverarch.html)）

## Thread-based

Thread Basedの場合のサーバの典型的なコードは以下のようになる。

![nodes-event-loop-from-the-inside-out-sam-roberts-ibm-5-1024.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/26eabb15-feb1-d855-a42e-4900398d0670.jpeg)
[画像引用：https://www.slideshare.net/NodejsFoundation/nodes-event-loop-from-the-inside-out-sam-roberts-ibm]

acceptというシステムコールを通して接続されたコネクションをpthread_createで別のスレッドに渡して、別のスレッドでそのコネクションを処理させます。メインスレッドは、acceptでのブロッキング状態にすぐに戻り、ユーザーからの新しい接続に備えるという流れです。

つまり、ユーザーからのコネクション1つにつきスレッドを1つ作成して、そのスレッドでコネクションに対応しているという訳です。これだとスレッドの無駄使いだし、コンテキストスイッチも発生してしまいます。

このサーバアーキテクチャを図で表すと以下のようになります。

<img width="1109" alt="スクリーンショット 2020-03-13 10.08.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/6dc69287-6722-733c-e2f7-24ecbfa5ad4d.png">
[画像引用：[Node.jsデザインパターン第2版](https://www.amazon.co.jp/Node-jsデザインパターン-第2版-Mario-Casciaro/dp/4873118735)]

Idle timeも多くなってしまっていることが分かります。このサーバアーキテクチャで出現した問題が「c10k問題」。c10k問題は[The c10k Problem](http://kegel.com/c10k.html)を参考されたし。

wikipediaからc10k問題の定義を引用しときます。


> C10K問題（英語: C10K problem）とは、Apache HTTP ServerなどのWebサーバソフトウェアとクライアントの通信において、クライアントが約1万台に達すると、Webサーバーのハードウェア性能に余裕があるにも関わらず、レスポンス性能が大きく下がる問題である。
引用：https://ja.wikipedia.org/wiki/C10K問題

またまた引用します。


> preforkモデルのApatchでは、クライアントの接続要求から始まる一連の処理を各プロセスで１接続ずつ処理します。そのため大量の接続を同時に処理するにはその分だけプロセス（またはスレッド）を起動しなければなりません。これでも複数の接続を並行して処理することはできますが、あまり大量のプロセスを起動するとプロセス間コンテキストスイッチのオーバーヘッドが大きくなって性能が劣化します。これがC10K問題の本質です。
引用：　[nginx実践入門](https://www.amazon.co.jp/nginx実践入門-WEB-DB-PRESS-plus/dp/4774178667/ref=sr_1_1?adgrpid=56053864951&gclid=Cj0KCQjw6sHzBRCbARIsAF8FMpX-hy1Mwhmh2dB6ZufQefHuuTBqS6RLN3YrBi1hCe8kE4EzN-dUkOAaAi5CEALw_wcB&hvadid=338518511220&hvdev=c&hvlocphy=9053264&hvnetw=g&hvqmt=e&hvrand=1055743075819050415&hvtargid=kwd-332420995816&hydadcr=27263_11561109&jp-ad-ap=0&keywords=nginx+実践入門&qid=1584447613&sr=8-1)


このc10k問題を解決するのが、非同期I/Oであり、非同期I/Oを用いたサーバアーキテクチャである「Event-Driven」（イベント駆動型）です。

## Event-Driven

イベント駆動型のサーバアーキテクチャを理解するためには、まず「非同期I/O」を理解する必要があります。

### 非同期I/O

Unixには、以下の5種類のI/Oモデルが存在します。

1. ブロッキングI/O
2. 非ブロッキングI/O
3. I/Oの多重化（selectとpoll）
4. シグナル駆動I/O（SIGIO）
5. 非同期I/O（Posix.1のaio_関数群）

Node.jsで使われているのは「非同期I/O」です。

<img width="700" alt="スクリーンショット 2020-02-16 9.51.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/bcacc5bc-beda-1228-49e1-cbc2e4d4d672.png">
画像引用：[Unix Network Programming](https://www.amazon.co.jp/Unix-Network-Programming-Addison-Wesley-Professional/dp/0131411551/ref=dp_ob_title_bk)

処理をカーネルに任せ、処理が完了したらカーネルが元のスレッドに通知をよこすというI/Oモデルです。ちなみによく聞く「ノンブロッキングI/O」は以下のようなI/Oモデルです。

<img width="745" alt="スクリーンショット 2020-02-16 9.50.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/cf797f6a-e81a-0b9b-e5bc-239a71a17d95.png">
画像引用：[Unix Network Programming](https://www.amazon.co.jp/Unix-Network-Programming-Addison-Wesley-Professional/dp/0131411551/ref=dp_ob_title_bk)

図から分かるように、アプリケーション側からカーネルに「データの準備が完了したか」を尋ねる作業をループで繰り返す必要があり、リソースが勿体無いので、イベント駆動型では非同期I/Oモデルが採用されています。

この非同期I/Oモデルを用いることで実現されるのが「イベントループ」です。通知を発生させるイベントを常にループ文で監視していることから「イベントループ」です。また、このおかげでユーザーからのコネクションをシングルスレッドで処理することが可能になります。

<img width="994" alt="スクリーンショット 2020-03-17 21.49.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/346ef25a-cf58-3292-a2be-8ee78a60632e.png">
画像引用：[Node.jsデザインパターン第2版](https://www.amazon.co.jp/Node-jsデザインパターン-第2版-Mario-Casciaro/dp/4873118735)

### リアクタパターン

このイベントループを用いたイベント駆動型モデルは、リアクタパターンと呼ばれます。（非同期I/Oを用いたイベント駆動型モデルなので、プロアクタパターンと呼ぶのだろうか。「Node.jsデザインパターン第2版」に沿って、ここではリアクタパターンと呼ぶことにします。）

リアクタパターンの定義は以下。

> リアクタパターンではI/Oの処理はいったんブロックされる。監視対象のリソース（群）で新しいイベントが発生することでブロックが解消され、この時、イベントに結びつけられたハンドラ（コールバック関数）に制御を渡すことで呼び出し側に反応（react）する。
引用：[Node.jsデザインパターン第2版](https://www.amazon.co.jp/Node-jsデザインパターン-第2版-Mario-Casciaro/dp/4873118735)

Node.jsでは、非同期処理を使う場合、イベントにコールバックを持たせて、イベントが終了したものからコールバックを実行しています。ちなみに、Javascriptの関数は第1級オブジェクトなので、関数にコールバック関数を持たせるのが非常に容易です。

リアクタパターンを図で表すと以下のようになる。

<img width="764" alt="スクリーンショット 2020-03-13 10.33.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/877ca605-973e-c11b-ed25-781cd36400fc.png">
画像引用：[Node.jsデザインパターン第2版](https://www.amazon.co.jp/Node-jsデザインパターン-第2版-Mario-Casciaro/dp/4873118735)


Node.jsでは、ここで説明した「イベント駆動型」モデルが採用されています。ただ、注意したいのは、Node.jsで用いられているイベントループのデザインはこれとは少し異なるということです。

まずNode.jsでは、非同期I/Oを使っている処理もありますが、内部的にスレッドプールを使っている処理もあります。そして2つにNode.jsではイベントキューが複数存在するということです。全てのイベントのハンドラが同一のイベントキューに入れられていくのではなく、イベントの種類に応じて積まれていくイベントキューが異なります。


# Libuvが提供する非同期処理のアーキテクチャ

Node.jsで用いられる「イベントループ」を提供しているのがLibuvです。ここではLibuvが提供する以下の概念について見ていきます。

- Event Loop
- Handles
- Requests
- Thread Pool


## イベントループ

イベントループの定義を公式から引用します。

> The event loop is what allows Node.js to perform non-blocking I/O operations — despite the fact that JavaScript is single-threaded — by offloading operations to the system kernel whenever possible.
Since most modern kernels are multi-threaded, they can handle multiple operations executing in the background. When one of these operations completes, the kernel tells Node.js so that the appropriate callback may be added to the poll queue to eventually be executed. 
引用：[The Node.js Event Loop, Timers, and process.nextTick](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)

先ほど紹介したように、「非同期I/O」を可能にするのが「イベントループ」です。ちなみに、イベントループはNode.jsのメインスレッドで、ひたすらクルクル回っています。（ループ文）

メインスレッドを止めてしまうようなタスク（I/Oに関するタスクなど）を入れてしまうと、その処理に時間を食ってしまい、そこでイベントループが止まってしまい、他の処理ができなくなります。そのため、そういった処理に関しては、カーネル内のマルチスレッドを使った非同期I/Oモデルに処理を依頼する訳です。そして依頼したI/O処理が完了したら、登録しておいたハンドラ（コールバック関数）を実行する訳ですが、このハンドラはqueueに入って、メインスレッド（イベントループが回っているスレッド）で順次実行されていきます。この挙動によって、Node.jsの非同期I/Oでは、「競合状態」を気にせずに開発することができます。

Node.jsのイベントループは、いくつかのフェーズから構成されています。このフェーズごとの挙動は、ここでは省略させてもらいます。イベントループに関する分かりやすかった図を載せておきます。

<img width="768" alt="スクリーンショット 2020-03-11 21.49.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/3e95e4e8-a86a-114e-3a14-4b1fb7b986b9.png">
[画像引用：https://drive.google.com/file/d/0B1ENiZwmJ_J2a09DUmZROV9oSGc/view]

この図内の「黄色いJSの箱」の部分を詳細に見ると以下のようなループになっています。

<img width="774" alt="スクリーンショット 2020-03-11 21.47.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/016c38c4-649e-92e6-948e-8d993fc3fc32.png">
[画像引用：https://drive.google.com/file/d/0B1ENiZwmJ_J2a09DUmZROV9oSGc/view]

Node.jsのサーバを開始する際にも、イベントループが利用されています。[公式ドキュメント](https://nodejs.org/en/docs/guides/getting-started-guide/)の、Node.jsを使ったサーバーを作るためのコードを引用します。

```javascript

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

server.listenで内部的にepollなど非同期I/Oが用いられています。ハンドラは、arrow関数の部分ですね。tcp connectionをacceptした時のコールバックとしてアプリケーションが非同期に実行されるようにコードが書かれています。

## HandleとRequest

イベントループ内で処理されるタスクはHandleオブジェクトとRequestオブジェクトの２種類存在します。

Handleは長期間存在することができるオブジェクトで、I/Oが発生していない時でもイベントループを維持します。Requestは短期間存在するオブジェクトで、I/Oが発生している時のみイベントループを維持します。

イベントループは、アクティブなHandlesもしくはRequestsがなければ止まります。

## スレッドプール

Node.jsはイベント駆動型のサーバアーキテクチャを採用していることからも、よく「シングルスレッド」だと表現されます。しかしここで注意しておきたいのですが、Node.jsは処理によって、内部的にスレッドプールを使った並行処理を行なっています。

ここから動画「[The Node.js Event Loop: Not So Single Threaded](https://www.youtube.com/watch?v=zphcsoSJMvM)」から画像を大量拝借しています。（すごく分かりやすかった。）

例えばCPU intensiveな処理であるcryptモジュールを使ったコードを見てみます。

![the-nodejs-event-loop-not-so-single-threaded-15-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/7b9eaf89-0d38-536e-6382-f50e520e56e8.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

ここでcrypt.pdkdf2は非同期に実行されています。（引数の最後に、非同期処理特有のcallbackであるarrow関数が見られます。これが無ければcrypt.pdkdf2は同期処理で実行されます。）for文でループさせてcrypt.pdkdf2を２回使用していることに注意して下さい。これをマルチコアで実行すると、実行にかかる時間は以下のようになります。

![the-nodejs-event-loop-not-so-single-threaded-16-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/b9952423-adb2-f5b2-ed0d-ea36f1f98a10.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

同じくマルチコア環境で、今度は繰り返し回数を４回にしてみると以下のようになります。

![the-nodejs-event-loop-not-so-single-threaded-17-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/cd27c702-e9bd-2498-4ecc-2d0fac703c6c.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

マルチコアで実行しているため前の場合と比べて2倍の時間がかかってしまっていることに注意です。また、preemptiveなマルチタスクとして処理されている（それぞれのタスクを割り当てられたtime sliceごとに実行していく）ので、４回全て同じくらいの処理時間で終了しています。

今度は繰り返し回数を6回にすると実行時間は以下のようになります。

![the-nodejs-event-loop-not-so-single-threaded-18-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/dc4fac93-5d90-7cef-946c-6d01b2d946f5.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

なぜこのようになるかというと、Node.jsが内部的に4つのthread poolをデフォルトで持っているからです。4つのタスクは4つのスレッドを用いてマルチタスクで処理され同時に終わっていますが、後の2つはスレッドが空いてから実行されます。（このthread poolはLibuvによって提供されているもので、環境変数UV_THREADPOOL_SIZEをいじることでthread poolの個数を変えることができます。）

これでNode.jsでは内部的にスレッドプールが用いられていることが分かりました。一方で、先に紹介した通り非同期I/Oも用いられています。非同期I/Oを示すためにhttpsモジュールを使った例も動画で紹介されていたので、見ていきます。


![the-nodejs-event-loop-not-so-single-threaded-22-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/8195e4b0-cd39-c842-9657-004baf231998.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

（上のスライドではfor文を2回繰り返していますが、）for文を6回繰り返した場合の実行時間は以下です。

![the-nodejs-event-loop-not-so-single-threaded-25-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/41c99cca-9e90-2a29-8872-f7a9cab4979f.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

httpモジュールは、thread poolを使わず、OSに依頼してepollなどを使っているため、6 Requestsの場合でもほぼ同時にタスクが終了しています。

では、どの処理がthread poolを使って、どの処理がepollやkqueueなど非同期I/Oを使うのかっていう話になりますが、以下の画像を参照してください。

![the-nodejs-event-loop-not-so-single-threaded-29-638.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/0f25ea13-c5a2-49b3-a671-070f30325506.jpeg)
[画像引用：https://www.slideshare.net/nebrius/the-nodejs-event-loop-not-so-single-threaded]

基本的にはthread poolではなく、OSが提供する非同期I/Oが使われます。じゃあ何故全てOSの非同期I/Oを使わずにthread poolを使う必要があるのか。それは設計上の難しさがあったからだそうです。詳しくは[asynchronous disk I/O](https://blog.libtorrent.org/2012/10/asynchronous-disk-io/)を参考にしてください。

繰り返しますが、このthread poolはLibuvが提供しています。Libuvのデザインの画像をよく見ると右にthread poolと載っています。

![architecture-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/89ec53d3-8fd1-ffc4-3d6a-04b8d1e6660d.png)

# V8

Libuvを一通り見たところで、次はV8を見ていきます。V8は、Javascirptで書かれているソースコードを受け取って、それを解析しcompileして実行します。

## V8の機能群

![1*QG6GNe2ag-4puxpjc5Y2iw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/af7f69c1-0d3e-4611-5824-0a26a21442e9.png)
[画像引用：[JavaScript V8 Engine Explained](https://hackernoon.com/javascript-v8-engine-explained-3f940148d4ef)]

- コードを実行する環境として、call stackとheapという概念があります。Javascriptはシングルスレッドで実行される言語であり、call stackは1つだけです。また、オブジェクトをheapに割り当てたりするわけですが、オブジェクトを使い終わったのに割り当てたメモリを解放しないとメモリリークが起きちゃいます。そこでOrinocoというGarbage Collectorの出番となります。
- V8はJavascriptで書かれたソースコードを受け取って、それを機械語にする必要があります。その際に使われるのがIgnitionというインタプリタとTurboFanという最適化コンパイラです。

(Liftoffについてはこの記事では触れていません。)


## V8の処理の流れ

![1*ZIH_wjqDfZn6NRKsDi9mvA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/6f3c791d-ce23-34b9-3265-9e37de2f746f.png)
[画像引用：[Understanding V8’s Bytecode](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775?)]

- ソースコードをV8に渡す
- Perserを使ってソースコードを解析。そしてASTという抽象構文木を作る。
- IgnitionというInterpreterを使ってASTをBytecodeに変換する。（変換されたBytecodeは同じくIgnitionによって実行される。）
- IgnitionはASTをBytecodeに変換しつつ、その時の変換情報を蓄えている。（Profiilng）
- 特定の条件下でコードを最適化するために、Ignitionは、蓄えた情報とBytecodeをTurboFanに渡す。
- TurboFanは、そのコードを最適化された機械語に変換して実行

IgnitionとTurboFanの部分が少しややこしいので、別の画像でも確認しておきましょう。


<img width="951" alt="スクリーンショット 2019-12-12 16.44.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/5313090f-d3de-a0a2-898f-36f26784c648.png">
[画像引用：[Parsing JavaScript - better lazy than eager? ](https://www.youtube.com/watch?v=Fg7niTmNNLg)]


ASTがBytecode generatorによってBytecodeになり、それがIgnitionによって実行されます。（ASTをBytecodeに変換するBytecode generatorと、Bytecodeを実行するBytecode Handlerを合わせてIgnitionと総称しているぽいです。）
TurboFanは、Bytecodeを受け取り、機械語を生成し、それをそのまま実行しています。

## ScannerとParserとAST

### Scanner

<img width="576" alt="スクリーンショット 2020-03-16 9.55.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/0861aed7-0530-ff58-6eec-71ab3be22ef2.png">
[画像引用：[Blazingly fast parsing, part 1: optimizing the scanner](https://v8.dev/blog/scanner)]

Scannerは、V8に渡されたJavascriptソースコードを字句解析（tokenizer/ lexical analysis ）して、tokenに分解します。tokenの定義は以下。

> Tokens are blocks of one or more characters that have a single semantic meaning: a string, an identifier, an operator like ++.
引用：https://v8.dev/blog/scanner

パフォーマンス向上のためにScannerで使われている仕組みなど、詳細は[Blazingly fast parsing, part 1: optimizing the scanner](https://v8.dev/blog/scanner)を参照して下さい。

### Parser

字句解析を終えてparserに流れてきたtokenを、ECMAScriptで決められている構文に沿ってabstract syntax tree（AST）にします。この作業をparseといいます。

AST(Abstract Syntax Tree)っていうのは、抽象構文木のことで、プログラムの構造を示すオブジェクトです。

このASTは、Engineのみでなく、transpilerや静的解析にも使われるものです。V8では、このASTを基にBytecodeがIginitionによって作成されます。

ASTの例を1つ見ておきます。(参考：[How JavaScript works: Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse time](https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-time-abfcf7e8a0c8))

以下のJavascriptコードをASTにします。

```javascript

function foo(x) {
  if (x > 10) {
    var a = 2;
    return a * x;
  }
return x + 10;
}
```

ASTは以下。

![0*mSOIiWpkctkD0Gfg..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/a30be072-706f-16fc-b5b7-748a20b8abc0.png)
[画像引用：
[How JavaScript works: Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse time](https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-time-abfcf7e8a0c8)]

ちなみに以下のサイトで、JavascriptコードをASTに変換して見ることができます。

https://astexplorer.net

ASTに変換するこのParse作業っていうのは結構時間を食うものらしくて、最適化が重要になってきます。以下の画像は、どれだけParseに時間がかかっているかを示す画像。

<img width="874" alt="スクリーンショット 2020-03-10 17.18.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/fb333b44-dc9f-cede-638d-3c8ad3ae18d5.png">
[画像引用：https://docs.google.com/presentation/d/1b-ALt6W01nIxutFVFmXMOyd_6ou_6qqP6S0Prmb1iDs/present?%20slide=id.p&slide=id.g2220ee5730_1_7]

そこでParseを最適化するために「Preparser」と「Parser」の2つのParserがV8では使われています。

<img width="1355" alt="スクリーンショット 2019-12-13 0.56.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/6919ad53-b13a-1dfa-113e-54c958d96aba.png">
[画像引用：https://docs.google.com/presentation/d/1b-ALt6W01nIxutFVFmXMOyd_6ou_6qqP6S0Prmb1iDs/present?%20slide=id.p&slide=id.g1d5daf2403_0_153]

関数を除く、トップレベルに記述されているコードは、全て実行されるのでparse作業をしてASTに変換します。一方で関数にはトップレベルに書かれていたとしても結局呼ばれない関数も存在します。その結局実行されない関数に対して、フルでparse作業をすると、parseにかかる時間もメモリも無駄なのです。そこで「Preparse」の出番です。

Preparseでは、ASTを作ったりせず、とりあえず最低限必要な情報だけ作っておき、あとで関数が実際に呼び出されたらフルでParseします。

ちなみに、以下のようなJavascriptソースコードは、Parseという観点では非効率なコードです。

```javascript

function sayHi(name){
  var message = "Hi " + name + "!"
  print(message)
}

sayHi("Sparkle")
```

このようなコードでは、関数をPreparseした後、その関数をすぐ呼び出すことになるのでフルでParseされます。つまりすぐにParseするのに一度Preparseさせてしまっているのです。詳しくは、[How JavaScript works: Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse time](https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-time-abfcf7e8a0c8)を参照して下さい。

また、Preparserについて詳しく知りたい方は、公式の[Blazingly fast parsing, part 2: lazy parsing](https://v8.dev/blog/preparser)を参照してください。


## IgnitionとTurbofan

### CranksahftとFull-codegen

V8ではInterpreterとCompilerとしてCrankshaftとFull-codegenが使われてきたけど、それらがIgnitionとTurbofanに変わりました。

![20170803092506.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/562c51e8-9837-8c1f-236f-b051032f7c21.jpeg)
[画像引用：[Node8.3.0でデフォルトになるTF/Iに関わるベンチマークについて](https://blog.hiroppy.me/entry/2017/08/03/095304#TurboFan--Ignition)]

Crankshaftはtryスコープ、ES2015の最適化(e.g. scope, class literal, for of, etc…)などができなかったことや、低レイヤと高レイヤとの分離がうまくできておらずV8チームがアーキテクチャ依存のコードを大量生成しなければいけなかったことなどから、TurboFanに代わったそうです。

またFull-codegenは機械語にコンパイルするため、メモリを食うこと、またIgnitionが生成するBytecodeが最適化に利用できてそのスピードがFull-codegenよりも早かったことからIgnitionに代わったそうです。

### 処理の流れ

- まずASTがIgnitionに渡され、そしてBytecode（機械語を抽象化したコード）が生成され、実行が開始されます。最適化はされていないにしてもIgnitionが素早くBytecodeを生成するため、アプリケーションは素早く動作し始めることができます。
- Profilerがコードを監視していて、何度も繰り返しコンパイルされている部分、つまり最適化できると推測される部分を見つけます。ここではinline cachesという最適化手法が利用されています。
- 最適化できる場合は、Ignitionもその情報を活用し最適化しますが、Turbofanも活用します。TurboFanにBytecodeが渡され、speculative optimizationという最適化手法を用いて、最適化された機械語が生成されます。最適化できるという推測が間違っていた場合は、deoptimizeされます。
- profilerとcompilerのおかげで、徐々にJavascriptの実行が改善されていきます。

![interpreter-optimizing-compiler-20180614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/d4b35e25-1161-9c7f-9574-58a3a0f11402.png)
[画像引用：[JavaScript engine fundamentals: Shapes and Inline Caches](https://benediktmeurer.de/2018/06/14/javascript-engine-fundamentals-shapes-and-inline-caches/)]

Bytecodeっていうのは、機械語を抽象化したものです。

![1*aal_1sevnb-4UaX8AvUQCg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/d51356e2-14d8-653c-9fa0-fcdd552487cf.png)
[画像引用：[Understanding V8’s Bytecode](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775)]

BytecodeについてV8の人の説明を引用しておきます。

> Bytecode is an abstraction of machine code. Compiling bytecode to machine code is easier if the bytecode was designed with the same computational model as the physical CPU. This is why interpreters are often register or stack machines. Ignition is a register machine with an accumulator register.
引用：[Understanding V8’s Bytecode](https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775)

まとめると、Ignitionは、Bytecode（抽象化された機械語）を素早く生成できるけど、最適化はされていません。Bytecodeは、メモリをあまり食わないという特徴もあります。一方でTurboFanは、最適化に少し時間はかかるけど、最適化された機械語を生成できます。生成されるのが機械語なので、抽象化された機械語であるBytecodeよりもメモリを多く使います。

またIgnitionとTurbofanには様々な最適化テクが使われていますが、ここでは省略します。

- Speculative Optimization
- Hidden Classes
- inline caches

## Call stack と Heap

Call stackの定義をwikipediaから引用します。

> コールスタック (Call Stack)は、プログラムで実行中のサブルーチンに関する情報を格納するスタックである。実行中のサブルーチンとは、呼び出されたが処理を完了していないサブルーチンを意味する。
引用：https://ja.wikipedia.org/wiki/コールスタック


Call Stackは、コードが実行されていくにつれ、Stack Frameが積み重なっていきます。Call Stackを見ることで、プログラムが今どこにいるのか分かります。一方でHeapは、オブジェクトなどStack Frameのスコープを超えて保持すべきデータに対してメモリが割り当てられる場所です。

![img2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/9e67fa35-cdcf-cbaf-74c7-a6bc601f7e7e.jpeg)
[画像引用：[Confused about Stack and Heap?](https://fhinkel.rocks/2017/10/30/Confused-about-Stack-and-Heap/)]

Javascriptをブラウザで実行する際に、以下のようなエラー画面を見たことがあると思います。

![1*T-W_ihvl-9rG4dn18kP3Qw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496251/773a1f48-8041-8a0a-1dc9-eb10fcbf27aa.png)
（画像引用：[How JavaScript works: an overview of the engine, the runtime, and the call stack](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)）

これはCall Stackを表していて、この場合だと以下のようなコードが順次Stack Frameとして積み重なっていったということになります。

```javascript

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
    foo();
}
function start() {
    bar();
}
start();
```

# 最後に

4月からNode.jsを離れることになるので、ここまで読んだ記事とか知ったこととかをまとめてみました。間違っている部分とかあれば、指摘くださるとありがたいです。


# 参考

## Node.js(Libuv含む)

Event Loop and the Big Picture — NodeJS Event Loop Part1 https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810?

Don't Block the Event Loop (or the Worker Pool)
https://nodejs.org/ja/docs/guides/dont-block-the-event-loop/

Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方
https://employment.en-japan.com/engineerhub/entry/2019/08/08/103000

The Node.js Event Loop, Timers, and process.nextTick()
https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#event-loop-explained

そうだったのか！ よくわかる process.nextTick() node.jsのイベントループを理解する
https://www.slideshare.net/shigeki_ohtsu/processnext-tick-nodejs

asynchronous disk I/O
https://blog.libtorrent.org/2012/10/asynchronous-disk-io/

http://nikhilm.github.io/uvbook/

Node.jsでのイベントループの仕組みとタイマーについて
https://blog.hiroppy.me/entry/nodejs-event-loop#Poll-Phase

Node.js event loop architecture
https://medium.com/preezma/node-js-event-loop-architecture-go-deeper-node-core-c96b4cec7aa4

今日から始めるNode.jsコードリーディング - libuv / V8 JavaScriptエンジン / Node.jsによるスクリプトの実行
https://blog.otakumode.com/2014/08/14/nodejs-code-reading-startup-script/

Nonblocking I/O
https://medium.com/@copyconstruct/nonblocking-i-o-99948ad7c957

process.nextTick()
https://www.slideshare.net/shigeki_ohtsu/processnext-tick-nodejs

Node.jsでのイベントループの仕組みとタイマーについて
https://blog.hiroppy.me/entry/nodejs-event-loop

ループの中で
https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=1011s

libuv
https://www.youtube.com/watch?v=nGn60vDSxQ4

Node's Event Loop From the Inside Out by Sam Roberts, IBM
https://www.youtube.com/watch?v=P9csgxBgaZ8

イベントループとは一体何ですか？ | Philip Roberts | JSConf EU
https://www.youtube.com/watch?v=8aGhZQkoFbQ

## V8

JavaScript V8 Engine Explained
https://hackernoon.com/javascript-v8-engine-explained-3f940148d4ef

Understanding V8’s Bytecode
https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775

Explaining JavaScript VMs in JavaScript - Inline Caches
https://mrale.ph/blog/2012/06/03/explaining-js-vms-in-js-inline-caches.html

An Introduction to Speculative Optimization in V8
https://benediktmeurer.de/2017/12/13/an-introduction-to-speculative-optimization-in-v8/

How JavaScript works: an overview of the engine, the runtime, and the call stack
https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

How JavaScript works: Parsing, Abstract Syntax Trees (ASTs) + 5 tips on how to minimize parse time
https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-time-abfcf7e8a0c8

Confused about Stack and Heap?
https://fhinkel.rocks/2017/10/30/Confused-about-Stack-and-Heap/

JavaScript Internals: Under The Hood of a Browser
https://medium.com/better-programming/javascript-internals-under-the-hood-of-a-browser-f357378cc922

JavaScript Internals: Execution Context
https://medium.com/better-programming/javascript-internals-execution-context-bdeee6986b3b

How Does JavaScript Really Work? (Part 1)
https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d

How JavaScript works: Optimizing the V8 compiler for efficiency
https://blog.logrocket.com/how-javascript-works-optimizing-the-v8-compiler-for-efficiency/

V8のIgnition Interpreterについて
https://speakerdeck.com/brn/v8falseignition-interpreternituite?slide=14

V8 javascript engine for フロントエンドデベロッパー
https://www.slideshare.net/ssuser6f246f/v8-javascript-engine-for

JavaScript engines - how do they even? | JSConf EU
https://www.youtube.com/watch?v=p-iiEDtpy6I&feature=youtu.be&t=722

V8: an open source JavaScript engine
https://www.youtube.com/watch?v=hWhMKalEicY&feature=emb_title

Marja Hölttä: Parsing JavaScript - better lazy than eager? | JSConf EU 2017
https://www.youtube.com/watch?v=Fg7niTmNNLg


V8公式
https://v8.dev/blog