いくつかの質問から始める#
- ユーザーがアドレスバーに URL を入力した後、ブラウザがウェブページにナビゲートするプロセスはどのようなものか
- レンダラープロセスの核心的な仕事は何か？それはどのように HTML、CSS、JavaScript を可視化されたウェブページに変換するのか
- ウェブ開発者として、ウェブページのパフォーマンスを最適化するために役立つツールや実践は何か
マルチプロセスアーキテクチャ#
オペレーティングシステムの上にあるオペレーティングシステム
Mermaid Loading...
各プロセスの役割#
ブラウザプロセス#
- コアコーディネーター：ブラウザプロセスはアプリケーションの「指揮センター」であり、他のプロセスを調整し、タブ以外のすべてのブラウザトランザクションを処理します。
- ユーザーインターフェース (UI) 制御：それはブラウザアプリケーションの「Chrome」部分を制御し、アドレスバー、ブックマーク、前進および後退ボタンを含みます。その中の UI スレッド はこれらのブラウザボタンや入力フィールドを描画する役割を担っています。
- ネットワークリクエスト処理：ブラウザプロセス内の ネットワークスレッド は、ネットワークスタックと対話し、インターネットからデータを受信し、DNS クエリを処理し、TLS 接続などのプロトコルを確立し、サーバーリダイレクトを処理する専門のスレッドです。また、ユーザーが悪意のあるサイトにアクセスするのを防ぐために SafeBrowsing チェックを実行し、機密のクロスサイトデータを保護するためにクロスオリジン読み取りブロッキング (CORB) チェックを行います。
- ファイルおよびストレージアクセス：それはブラウザ内の「不可視で特権的な」部分、例えばファイルアクセスを処理し、その内部の ストレージスレッド が担当します。
- ナビゲーションフロー管理：ユーザーがアドレスバーに URL を入力してからページがレンダリングを開始するまでの全ナビゲーションフローはブラウザプロセスによって調整されます。ブラウザプロセスはウェブページをレンダリングするためにレンダラープロセスを探すか、起動します。そして IPC (プロセス間通信) を通じてナビゲーションを送信します。
- Service Worker の識別：ナビゲーションリクエストが入ると、ネットワークスレッド はリクエストのドメイン名が登録された Service Worker のスコープと一致するかどうかを確認します。一致する場合、UI スレッドは Service Worker コードを実行するためにレンダラープロセスを起動します。
- 入力イベント処理：ユーザーのジェスチャー（タッチやマウスクリックなど）は最初にブラウザプロセスによって受信されます。タブ内のコンテンツはレンダラープロセスによって処理されるため、ブラウザプロセスはイベントの種類と座標をレンダラープロセスに送信します。
レンダラープロセス#
- ウェブページコンテンツの表示：レンダラープロセスはタブ内に表示されるウェブサイトのコンテンツ全体を制御します。
- コアレンダリング作業：そのコアタスクは HTML、CSS、JavaScript をユーザーが対話できるウェブページに変換することです。これには、HTML を解析して DOM を構築し、CSS を解析してスタイルを計算し、要素の幾何形状を決定するためにレイアウトを実行し、描画記録を生成し、ページをレイヤー化して合成することが含まれます。
- メインスレッド：レンダラープロセスのメインスレッドは、ユーザーに送信されるコードの大部分を処理します。これには HTML 解析、スタイル計算、レイアウト、描画記録の生成、および JavaScript 実行が含まれます。
- ワーカースレッド：Web Worker または Service Worker が使用されている場合、一部の JavaScript コードはレンダラープロセス内の ワーカースレッド によって処理されます。
- 合成スレッドとラスタライズスレッド：ページを効率的かつスムーズにレンダリングするために、レンダラープロセス内部では 合成スレッド (Compositor thread) と ラスタライズスレッド (Raster threads) が実行されています。合成スレッド はページをレイヤーに分割し、ラスタライズスレッド はこれらのレイヤーをタイルに分解し、GPU メモリにラスタライズして保存し、合成スレッドがそれらを合成してフレームを生成します。
- Service Worker の実行：Service Worker はレンダラープロセス内で実行される JavaScript コードです。
GPU プロセス#
- GPU タスクの処理：それは他のプロセスとは独立して GPU タスクを処理します。GPU は複数のアプリケーションからのリクエストを処理し、同じ表面に描画するため、これを別のプロセスとして分離しています。最終的な合成フレームは表示のために GPU に送信されます。
プラグインプロセス#
- プラグインの制御：それはウェブサイトで使用される任意のプラグイン、例えば Flash を制御します。
その他のプロセス#
- 拡張プロセス (Extension Process)：ブラウザ拡張機能の機能を処理します。
- ユーティリティプロセス (Utility Processes)：その他のさまざまな補助タスクを処理します。
マルチプロセスアーキテクチャの利点#
-
安定性の向上：もし一つのタブが応答しなくなった場合、そのタブが属するレンダラープロセスにのみ影響し、ブラウザ全体がクラッシュしたり、すべてのタブが応答しなくなることはありません。
-
セキュリティとサンドボックス化の強化：オペレーティングシステムはプロセスの権限を制限するメカニズムを提供しており、ブラウザはユーザー入力を処理するレンダラープロセスなどをサンドボックス化し、ファイルなどの特定の機能へのアクセスを制限することで全体的なセキュリティを向上させます。サイト分離 (Site Isolation) 機能はさらにセキュリティを強化し、各クロスサイト iframe に対して独立したレンダラープロセスを実行し、サイトを分離する最も効果的な方法です。
-
サービス化 (Servicification)：Chrome はブラウザプログラムの各部分をサービスとして実行しています。強力なハードウェア上では、各サービスは異なるプロセスに分割されてより高い安定性を提供し、リソースが制限されたデバイスでは、これらのサービスを一つのプロセスに統合してメモリ使用量を節約できます。