はじめに

こんにちは！ｉｉｍｏｎでエンジニアをしているひがです！

先日アドベントカレンダー2025でV8 JavaScript engineに関する記事を投稿させてもらいました！ https://tech.iimon.co.jp/entry/2025/12/05
（月日の流れがめちゃくちゃ早く感じます、投稿からもう2ヶ月経ちます、、1月もあっという間に過ぎ去ってしまいました）

上記の記事でも説明していますが、V8 JavaScript engineの役割としてはJavaScriptのコード解析やバイトコードの生成、JIT コンパイル、ガベージコレクション（メモリ管理）などがあり、ChromeやNode.jsなどにベースとなる機能を提供してくれています。一方で、そのベースの機能を継承して実際に実装しているのは各々の実行環境であり、それぞれにアーキテクチャが存在します。

ということで、今回はChromeがどういうアーキテクチャでどんなふうにうごいているか簡単に見ていこうと思います！！！

なお、本記事の内容は下記のブログを参考に展開していきます。
最新のウェブブラウザの詳細（パート 1）
※ 2018年の記事で少し古いですが、基本的な考え方として学べる部分は多いと思い記事にしました

Chromeのアーキテクチャはマルチプロセス？！！

いきなり本命ですが、Chromeのアーキテクチャはマルチプロセスを採用しています。
「プロセス」という言葉はアプリの実行プログラムを指し、Chromeにおいてはブラウザプロセス、レンダラープロセス、GPUプロセスなど色々な種類のプロセスが独立しつつも連携し合ってChromeという一つのアプリを動かしています。（複数のプロセス＝マルチプロセスです）
各プロセスはそれぞれ役割を持っていて、例えばブラウザプロセスだとChrome上のアドレスバーやブックマーク、ネットワークリクエストなどの目に見えないところまでの制御を担当していたりします。レンダラープロセスではタブ内のWebサイトの表示を制御しており、HTMLやCSS、JSによる処理もこちらのプロセスで制御されています。
この辺りのプロセスについては参考ブログの中でも一覧表がありますので、ぜひ見てみてください。

また、プロセスと密接に関わりのあるものとしてスレッドもあります。スレッドはプロセスの中に複数存在する実行単位を指し、一つのプロセスの中で複数同時に処理することですばやくタスクをこなすことを実現しています。Chromeのスレッドにもいくつか種類があり、代表的なものでメインスレッドやIOスレッド、ワーカースレッドなどがあります。各スレッドにはやはりそれぞれ役割があり、例えばメインスレッドではUIの更新やHTMLの解析、JSの実行など、IOスレッドではネットワーク通信やファイル操作などを実行していたりします。

最新のウェブブラウザの詳細（パート 1）
図 9より参照

ちなみにChromeのメニューから: 右上「︙」＞「その他のツール」＞「タスクマネージャ」と進むと実際に動いているタスクの一覧とメモリ使用量やCPU、ネットワーク、プロセスIDなどを確認することができます。

マルチプロセスを採用することの意味

マルチプロセスを採用することには意味（メリット）があります。例えば複数のタブを開いている状態ではそれぞれのタブでレンダラープロセスが動いていますが、これが独立しているおかげで一つのタブがクラッシュしてもほかのタブが影響を受けることはありませんので、そのあたりはユーザビリティの向上にもなっています。（一つのタブのせいでほかのタブに影響があったら怖くていくつもタブが開けませんよね笑）
またセキュリティ面においても、それぞれのプロセスが独立しているおかげ（メモリが共有されない、サンドボックス内での実行におさまるなど）で攻撃手段を減らしたり、被害範囲を限定することが出来ています。例えばレンダラープロセスからファイルシステムへのアクセスを制限することで悪意のあるサイトからシステムを守ることができます。
ちなみに、セキュリティ面に関してサイト分離という機能がChromeに実装され、それまでiframeで存在していた脆弱性に対応することができました。（Chrome67以降のPCではデフォルト有効みたいです）この対策もiframeのレンダラープロセスを分離することにより実現されています。このあたりの内容についても参考ブログの方で言及されていますので、ぜひ見てみてください。

最新のウェブブラウザの詳細（パート 1）
図 12より参照

マルチプロセスを採用することの課題とその対応

ここまでChromeがマルチプロセスを採用することの意味について見てきましたが、ここからは逆にデメリットになりうる影響について見ていこうと思います。
ご存知の方も多いかと思いますが、Chromeはメモリ消費が高くなりやすいアプリです。マルチプロセスにより高い安定性（タブ間の独立など）やセキュリティ面を確保しつつ快適で便利なブラウザの機能を提供していますが、その分消費されるメモリが多くなります。（当たり前といえば当たり前ですよね）
マルチプロセスを採用している都合上そこは避けられないのですが、Chromeにはその点においても工夫があります。Chromeはデバイスの性能やCPUの使用量に応じてプロセスを統合したり分割することでメモリの節約に成功しています。各プロセスをサービスとして実行することからServicificationという名がありました。このあたりも柔軟に対応できる設計はとても優れているなと個人的に感動しました。

余談ですが、Chrome 拡張機能のサービスワーカーも一定時間使用されていないと停止してメモリを節約するようです。バックグラウンド側で処理を実装する際はインスタンスが破棄されることも考慮に入れて実装しないと思わぬところでハマってしまうかもしれませんので、ご注意ください。

Chrome 拡張機能: Service Worker の停止をテストする方法

まとめ

普段フロントエンドの開発でChromeを操作していますが、改めてそのアーキテクチャについて学んだことで、その特性も理解した上でうまくコントロールしてセキュアな良いサービス開発に繋げていきたいなぁと感じました。ちなみに、上記のブログには続きがあり、パート4まで展開されています。

最新のウェブブラウザの詳細（パート 2）
ざっくり概要：ナビゲーションでの動作
URLを入力してからページが表示されるまでの流れを解説。UIスレッドの入力判定、ネットワークスレッドのDNS解決・TLS接続、レスポンスのMIMEタイプ検証・SafeBrowsingチェック、レンダラプロセスの起動とIPC通信によるデータ転送、Service Workerとの連携を段階的に説明している。

最新のウェブブラウザの詳細（パート 3）
ざっくり概要：レンダラプロセスの内部処理
HTMLからユーザー操作可能なページへの変換過程を解説。DOM構築、サブリソース並行読込、JSによる解析ブロック、スタイル計算・レイアウトツリー生成、ペイント順序の記録、レイヤ分割・ラスタライズによる合成処理を段階的に説明し、requestAnimationFrameやWeb Workerによる最適化手法にも触れている。

最新のウェブブラウザの詳細（パート 4）
ざっくり概要：コンポジタへの入力
ユーザー入力をコンポジタがどう処理するかを解説。イベントはブラウザプロセス→レンダラプロセスへ伝搬し、ハンドラ領域は「高速スクロール不可領域」となる。イベント委任によるパフォーマンス低下の対策としてpassive: trueやCSS touch-actionを紹介し、連続イベントの統合とgetCoalescedEventsによる中間座標取得にも言及している。

また、RenderingNGというChromiumの次世代レンダリングアーキテクチャがあるのですが、そちらに関する下記ドキュメントの中でも画面描画までの間にブラウザの中で何がどう動いているのか細かく解説されていますので（本記事の知識もベースに見れますし）おすすめです！
RenderingNG アーキテクチャ