最新のウェブブラウザの詳細(パート 1)

Mariko Kosaka

CPU、GPU、メモリ、マルチプロセス アーキテクチャ

この 4 部構成のブログシリーズでは、Chrome ブラウザのアーキテクチャの概要から、 具体的な例を見てみましょう。ブラウザがコードをどのように変換するのか、 ウェブサイトが正しく機能している、またはパフォーマンスのために特定の手法を提案する理由が不明な場合 このシリーズでは

このシリーズのパート 1 では、コンピューティングの主な用語と Chrome の マルチプロセスアーキテクチャに 関わっています

コンピュータの中核には、CPU と GPU があります。

ブラウザが実行されている環境を理解するには、いくつかの情報を理解する必要があります。 説明しました。

CPU

<ph type="x-smartling-placeholder">
</ph> CPU <ph type="x-smartling-placeholder">
</ph> 図 1: オフィス ワーカーとして働く 4 つの CPU コアが、それぞれのデスクに来てタスクを処理する

1 つ目は中央処理UCPU)です。CPU はパフォーマンスの 学習します。CPU コア(この画像ではオフィス ワーカー)は、さまざまなタスクを処理できる 入ってきて 1 つずつ作成します。数学からアートまで、なんでも答えられるようになります 顧客との通話につなげますかつては、ほとんどの CPU は単一のチップでした。コアは、別の CPU のようなものです。 同じチップを使用します。最新のハードウェアでは、多くの場合、複数のコアを用意してコンピューティング能力を強化 スマートフォンやノートパソコンです

GPU

<ph type="x-smartling-placeholder">
</ph> GPU <ph type="x-smartling-placeholder">
</ph> 図 2: 限られたタスクを処理することを示唆する多くの GPU コアとレンチ

グラフィック処理 Unit(GPU)はコンピュータのもう 1 つの部分です。CPU とは異なり GPU は、単純なタスクの処理に優れていますが、複数のコアを同時に処理します。名前のとおり 示唆するように、当初はグラフィックスを扱うために開発されました。グラフィックスのコンテキストでは "GPU の使用"(GPU ベース)高速なレンダリングとスムーズなインタラクションに関係します 近年、GPU によるコンピューティングの高速化により、より多くのコンピューティングを サポートしています。

パソコンやスマートフォンでアプリを起動する際には、CPU と GPU が電力を供給します。 確認します。通常、アプリケーションは Google Cloud で提供されるメカニズムを使用して、 オペレーティング システム。

<ph type="x-smartling-placeholder">
</ph> ハードウェア、OS、アプリケーション <ph type="x-smartling-placeholder">
</ph> 図 3: 3 層のコンピュータ アーキテクチャ。下部にあるマシン ハードウェア、操作 中央がシステム、上がアプリケーション。

プロセスとスレッドでプログラムを実行する

<ph type="x-smartling-placeholder">
</ph> プロセスとスレッド <ph type="x-smartling-placeholder">
</ph> 図 4: 境界ボックスとしてのプロセス、プロセス内を泳ぐ抽象的な魚としてのスレッド

ブラウザのアーキテクチャに入る前に理解しておくべきもう 1 つの概念は、プロセスとスレッドです。 プロセスは、アプリケーションの実行プログラムとして記述できます。スレッドとは そのプロセスのプログラムのすべての部分を実行します。

アプリケーションを起動すると、プロセスが作成されます。プログラムは、それをサポートするためにスレッドを作成することがあります。 必須ではありません。オペレーティングシステムはプロセスに「スラブ」を提供します。必要なメモリの量を すべてのアプリの状態がこのプライベート メモリ領域に保持されます。[ アプリケーションではプロセスも終了し、オペレーティング システムによってメモリが解放されます。

<ph type="x-smartling-placeholder">
</ph> プロセスとメモリ <ph type="x-smartling-placeholder">
</ph> 図 5: メモリ空間を使用し、アプリケーション データを保存するプロセスの図

プロセスは、異なるタスクを実行するために別のプロセスを開始するようにオペレーティングシステムに要求できます。この メモリの異なる部分が新しいプロセスに割り当てられます。2 つのプロセスが 通話には、IPCInter Process Communication)機能を使用できます。多数のアプリケーション このように動作するように設計されています。ワーカー プロセスが応答しなくなった場合に、ワーカー プロセスを再起動できるようにします。 アプリケーションのさまざまな部分を実行している他のプロセスを停止することなく、実行できます。

<ph type="x-smartling-placeholder">
</ph> ワーカー プロセスと IPC <ph type="x-smartling-placeholder">
</ph> 図 6:IPC を介して通信する個別プロセスの図

ブラウザ アーキテクチャ

それでは、ウェブブラウザはプロセスとスレッドを使ってどのように構築されるのでしょうか。1 つのプロセスで多数のプロセスが 異なるスレッドまたは多数の異なるプロセスが IPC 経由で通信するスレッドが少数の場合、

<ph type="x-smartling-placeholder">
</ph> ブラウザ アーキテクチャ <ph type="x-smartling-placeholder">
</ph> 図 7: 各ブラウザ アーキテクチャのプロセス / スレッドの図

ここで重要なのは、これらのさまざまなアーキテクチャが実装の詳細だということです。 ウェブブラウザの構築方法に関する標準的な仕様はありません。ブラウザによっては まったく異なるものになります。

このブログシリーズでは Chrome の最新のアーキテクチャを使用します。 構成を示しています。

一番上にはブラウザ プロセスが他のプロセスと連携し、 行います。レンダラ プロセスでは、複数のプロセスが作成され、各プロセスに 確認できます。つい最近まで、Chrome ではタブごとにプロセスが用意されていました。今度は iframe を含めて、各サイトに独自のプロセスを設けます(サイト分離をご覧ください)。

<ph type="x-smartling-placeholder">
</ph> ブラウザ アーキテクチャ <ph type="x-smartling-placeholder">
</ph> 図 8: Chrome のマルチプロセス アーキテクチャの図複数のレイヤが 各タブで複数のレンダラ プロセスを実行している Chrome を表すレンダラ プロセス。

どのプロセスで何を制御するか?

次の表に、Chrome の各プロセスと、そのプロセスが制御する対象を示します。

プロセスとその制御対象
ブラウザ 「Chrome」を制御しますアドレスバー、ブックマーク、戻る、 進むことができます。
ウェブブラウザの目に見えない特権的な部分も扱います。たとえば、 ネットワーク リクエスト、ファイル アクセスなどです。
レンダリング ウェブサイトが表示されるタブ内のあらゆる要素を制御します。
プラグイン ウェブサイトで使用されるプラグイン(Flash など)を制御します。
GPU 他のプロセスから分離して GPU タスクを処理します。異なるプロセスに分割される GPU は複数のアプリからのリクエストを処理し、それらを同じサーフェスに描画するためです。
<ph type="x-smartling-placeholder">
</ph> Chrome のプロセス <ph type="x-smartling-placeholder">
</ph> 図 9: ブラウザ UI のさまざまな部分を指し示すさまざまなプロセス

拡張機能プロセスやユーティリティ プロセスなど、さらに多くのプロセスがあります。パフォーマンスが Chrome で実行中のプロセスの数を確認するには、オプション メニュー アイコンをクリックします。 を開き、[その他のツール] を選択してから [タスク マネージャー] を選択します。ウィンドウが開き、現在実行中のプロセスのリストが表示されます。 CPU/メモリの使用量などです

Chrome のマルチプロセス アーキテクチャのメリット

先ほど、Chrome では複数のレンダラ プロセスが使用されることを説明しました。最もシンプルなケースでは 各タブに独自のレンダラ プロセスがあるとしましょう。3 つのタブを開いて、それぞれのタブを実行するとします。 レンダリングされます。

1 つのタブが反応しなくなった場合は、反応しないタブを閉じて次の作業に進めます。 他のタブは残っています。すべてのタブが 1 つのプロセスで実行されている場合、1 つのタブが応答しなくなると、すべてのタブが タブが反応しない。それは残念。

<ph type="x-smartling-placeholder">
</ph> タブの複数のレンダラ <ph type="x-smartling-placeholder">
</ph> 図 10: 各タブを実行する複数のプロセスを示す図

ブラウザの作業を複数のプロセスに分離するもう 1 つの利点は、セキュリティと 説明します。オペレーティング システムでは、プロセスの実行を場合、ブラウザは 特定のプロセスを特定の機能からサンドボックス化することができます。たとえば、Chrome ブラウザは レンダラ プロセスなどの任意のユーザー入力を処理するプロセスに対する任意のファイル アクセス。

プロセスには独自のプライベート メモリ領域があるため、多くの場合、プロセスには共通の (Chrome の JavaScript エンジンである V8 など)を使用して、つまり、メモリ使用量が多くなるため、 同じプロセス内のスレッドの場合ようには共有できません。 Chrome では、メモリを節約するためにスピンアップできるプロセスの数に上限を設けています。 この制限はデバイスのメモリと CPU 性能によって異なりますが、 この制限を超えると、1 つのプロセスで同じサイトから複数のタブが実行されるようになります。

より多くのメモリを節約する - Chrome のサービス機能

ブラウザのプロセスにも同じ手法が適用されます。現在 Chrome のアーキテクチャ変更が行われており、 ブラウザ・プログラムの各部分をサービスとして実行し、異なるプロセスに分割できる 1 つに集約できます

大まかに言えば、Chrome が高性能なハードウェアで実行されている場合、各サービスが次のように分割されます。 安定性が向上しますが、リソースの制約があるデバイス上にある場合、Chrome は サービスを 1 つのプロセスに統合し、メモリ使用量を節約します。同様のアプローチで この変更以前は、Android などのプラットフォームでメモリ使用量を抑えるためのプロセスが使用されていました。

<ph type="x-smartling-placeholder">
</ph> Chrome のサービス <ph type="x-smartling-placeholder">
</ph> 図 11: さまざまなサービスを複数のプロセスに移行する Chrome のサービスの図 単一のブラウザ プロセスで

フレームごとのレンダラ プロセス - サイト分離

サイト分離は最近、 クロスサイト iframe ごとに個別のレンダラ プロセスを実行する機能が Chrome に導入されました。 タブモデルごとに 1 つのレンダラ プロセスを使用するとき、これによりクロスサイトの iframe を 1 つのレンダラ プロセスで実行し、異なるサイト間でメモリ容量を共有します。 a.com と b.com を同じレンダラ プロセスで実行しても問題ないと思われるかもしれません。 同一オリジン ポリシー ウェブのコア セキュリティ モデルです。あるサイトが他のサイトのデータにアクセスできないようにしている できます。このポリシーの回避はセキュリティ攻撃の主な目的です。 プロセスの分離は、サイトを分離する最も効果的な方法です。あり Meltdown と Spectre プロセスを使用してサイトを分離する必要があることが一層明らかになりました。 Chrome 67 以降のパソコンではデフォルトでサイト分離が有効になっており、タブ内の各クロスサイト iframe は 別のレンダラプロセスを取得します

<ph type="x-smartling-placeholder">
</ph> サイト分離 <ph type="x-smartling-placeholder">
</ph> 図 12:サイト分離の図サイト内の iframe を参照する複数のレンダラ プロセス

サイト分離の実現は、数年に及ぶエンジニアリングの取り組みでした。サイト分離は、 異なるレンダラプロセスを割り当てるiframe が各要素と通信する方法を根本的に変え、 あります。異なるプロセスで動作する iframe があるページで devtools を開くと、 シームレスに見えるように 舞台裏の作業を行いますCtrl+F を押してファイルを見つけるだけでも、 ページ内の単語とは、さまざまなレンダラ プロセスを検索することを意味します。「新規顧客の獲得」目標を ブラウザ エンジニアが、重要なマイルストーンとしてサイト分離のリリースについて語っています。

まとめ

この投稿では、ブラウザ アーキテクチャの概要と、 マルチプロセスアーキテクチャに 関わっていますまた、Chrome のサービス化とサイト分離についても説明しました。 マルチプロセス アーキテクチャと密接に関係しています。次回の投稿では プロセスとスレッドの間で行われるようにします。

投稿はいかがでしたか?今後の投稿についてご不明な点やご意見がございましたら、 ぜひ Twitter の @kosamari からお知らせください。

次へ: ナビの動作