このページは Cloud Translation API によって翻訳されました。

最新のウェブブラウザの詳細（パート 1）

Mariko Kosaka

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

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

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

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

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

CPU

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

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

GPU

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

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

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

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

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

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

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

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

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

ワーカープロセスと IPC — </ph> 図 6：IPC を介して通信する個別プロセスの図

ブラウザアーキテクチャ

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

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

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

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

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

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

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

Chrome のプロセス — </ph> 図 9: ブラウザ UI のさまざまな部分を指し示すさまざまなプロセス

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

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

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

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

タブの複数のレンダラ — </ph> 図 10: 各タブを実行する複数のプロセスを示す図

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

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

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

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

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

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

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

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

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

まとめ

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

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

次へ: ナビの動作