Ein Blick auf moderne Webbrowser (Teil 1)

Mariko Kosaka

CPU-, GPU-, Arbeitsspeicher- und Multi-Prozess-Architektur

In dieser vierteiligen Blogreihe werfen wir einen Blick auf den Chrome-Browser – von der allgemeinen Architektur bis hin zu den Details der Rendering-Pipeline. Wenn Sie sich jemals gefragt haben, wie der Browser Ihren Code in eine funktionsfähige Website verwandelt, oder sich nicht sicher sind, warum eine bestimmte Technik zur Leistungsverbesserung empfohlen wird, ist diese Reihe genau das Richtige für Sie.

Im ersten Teil dieser Reihe befassen wir uns mit der grundlegenden Computing-Terminologie und der Multi-Prozess-Architektur von Chrome.

Das Herzstück des Computers sind CPU und GPU.

Um die im Browser ausgeführte Umgebung zu verstehen, müssen wir einige Computerteile und deren Funktion verstehen.

CPU

CPU
Abbildung 1: 4 CPU-Kerne, die an jedem Schreibtisch sitzen und Aufgaben übernehmen

Erstens ist die C C, also die C Instanz.C Die CPU ist das Gehirn eines Computers. Ein CPU-Kern, der hier als Büromitarbeiter abgebildet ist, kann viele verschiedene Aufgaben nacheinander erledigen. Die App kann alles von Mathematik bis hin zu Kunst beantworten und weiß, wie man Kundenanrufe beantwortet. Früher waren die meisten CPUs nur ein Chip. Ein Kern ist wie eine andere CPU im selben Chip. Bei moderner Hardware haben Sie oft mehr als einen Kern, wodurch Ihre Smartphones und Laptops mehr Rechenleistung erhalten.

GPU

GPU
Abbildung 2: Viele GPU-Kerne mit Schraubenschlüssel, die vorschlagen, dass sie eine begrenzte Aufgabe bewältigen

Ein weiterer Teil des Computers ist die Graphics-Prozession (Unit – GPU). Im Gegensatz zur CPU eignet sich eine GPU gut für die Verarbeitung einfacher Aufgaben, jedoch auf mehreren Kernen gleichzeitig. Wie der Name schon sagt, wurde es zuerst für Grafiken entwickelt. Aus diesem Grund kommt bei Grafiken mit „GPU-basiert“ oder „GPU-gestützte“ ein schnelles Rendering und eine reibungslose Interaktion einher. Durch GPU-beschleunigtes Computing wird in den letzten Jahren immer mehr Rechenvorgänge allein auf der GPU möglich sein.

Wenn Sie eine Anwendung auf Ihrem Computer oder Smartphone starten, steuern die CPU und die GPU die Anwendung. Normalerweise werden Anwendungen auf der CPU und der GPU über die vom Betriebssystem bereitgestellten Mechanismen ausgeführt.

Hardware, Betriebssystem, Anwendung
Abbildung 3: Drei Schichten der Computerarchitektur. Maschinenhardware unten, Betriebssystem in der Mitte und Anwendung oben.

Programm zu Prozess und Thread ausführen

Prozesse und Threads
Abbildung 4: Prozess als Begrenzungsrahmen, Fäden wie abstrakte Fische, die innerhalb eines Prozesses schwimmen

Ein weiteres Konzept, das Sie vor dem Eindringen in die Browserarchitektur beherrschen sollten, sind Prozesse und Thread. Ein Prozess kann als das ausführende Programm einer Anwendung bezeichnet werden. Ein Thread ist ein Thread, der sich innerhalb eines Prozesses befindet und einen beliebigen Teil des Programms des zugehörigen Prozesses ausführt.

Wenn Sie eine Anwendung starten, wird ein Prozess erstellt. Das Programm erstellt möglicherweise Threads, damit es funktioniert. Dies ist jedoch optional. Das Betriebssystem gibt dem Prozess eine „Slab“ an Arbeitsspeicher, mit dem er arbeiten kann, und der gesamte Anwendungsstatus wird in diesem privaten Speicherbereich gehalten. Wenn Sie die Anwendung schließen, wird auch der Vorgang abgebrochen und das Betriebssystem gibt Arbeitsspeicher frei.

Prozess und Speicher
Abbildung 5: Diagramm eines Prozesses, der Speicherplatz nutzt und Anwendungsdaten speichert

Durch einen Prozess kann das Betriebssystem aufgefordert werden, einen anderen Prozess zur Ausführung anderer Aufgaben zu starten. In diesem Fall werden dem neuen Prozess verschiedene Teile des Speichers zugewiesen. Wenn zwei Prozesse miteinander kommunizieren müssen, können sie dies über das Inter Process Communication (IPC) tun. Viele Anwendungen sind für diese Arbeitsweise konzipiert. Wenn ein Worker-Prozess nicht mehr reagiert, kann er neu gestartet werden, ohne andere Prozesse zu beenden, die andere Teile der Anwendung ausführen.

Worker-Prozess und IPC
Abbildung 6: Diagramm mit separaten Prozessen, die über IPC kommunizieren

Browserarchitektur

Wie also besteht ein Webbrowser aus Prozessen und Threads? Es kann sich um einen Prozess mit vielen verschiedenen Threads oder um viele verschiedene Prozesse mit einigen Threads handeln, die über IPC kommunizieren.

Browserarchitektur
Abbildung 7: Verschiedene Browserarchitekturen im Prozess / Thread-Diagramm

Hierbei ist zu beachten, dass es sich bei diesen verschiedenen Architekturen um Implementierungsdetails handelt. Es gibt keine Standardspezifikation für die Erstellung eines Webbrowsers. Die einen Browser-Ansatz kann ganz anders sein als ein anderer.

In dieser Blogreihe verwenden wir die in Abbildung 8 dargestellte aktuelle Architektur von Chrome.

Oben befindet sich der Browserprozess, der mit anderen Prozessen koordiniert wird, die verschiedene Teile der Anwendung abwickeln. Für den Rendererprozess werden mehrere Prozesse erstellt und jedem Tab zugewiesen. Bis vor Kurzem gab Chrome jedem Tab einen Prozess, wann immer dies möglich war. Jetzt wird versucht, jeder Website einen eigenen Prozess zu geben, einschließlich iFrames (siehe Website-Isolierung).

Browserarchitektur
Abbildung 8: Diagramm der Multi-Prozess-Architektur von Chrome. Unter dem Renderer-Prozess sind mehrere Ebenen zu sehen, wenn Chrome mehrere Renderer-Prozesse für jeden Tab ausführt.

Welcher Prozess steuert was?

In der folgenden Tabelle werden die einzelnen Chrome-Prozesse und ihre Steuerungsmöglichkeiten beschrieben:

Prozess und seine Steuerung
Browser Steuert den Chrome-Teil der Anwendung, einschließlich Adressleiste, Lesezeichen sowie Zurück- und Vorwärts-Schaltflächen.
Kann auch die unsichtbaren, privilegierten Bereiche eines Webbrowsers verarbeiten, z. B. Netzwerkanfragen und Dateizugriff.
Renderer Steuert alles innerhalb des Tabs, auf dem eine Website angezeigt wird.
Plug-in Steuert alle von der Website verwendeten Plug-ins, z. B. Flash.
GPU Verarbeitet GPU-Aufgaben isoliert von anderen Prozessen. Sie wird in verschiedene Prozesse unterteilt, da GPUs Anfragen von mehreren Anwendungen verarbeiten und sie auf derselben Oberfläche darstellen.
Chrome-Prozesse
Abbildung 9: Verschiedene Prozesse, die auf verschiedene Bereiche der Browser-UI verweisen

Es gibt noch mehr Prozesse wie den Erweiterungsprozess und Dienstprogramme. Wenn Sie sehen möchten, wie viele Prozesse in Chrome ausgeführt werden, klicken Sie rechts oben auf das Dreipunkt-Menü , wählen Sie „Weitere Tools“ und dann „Task-Manager“ aus. Daraufhin wird ein Fenster mit einer Liste der derzeit ausgeführten Prozesse mit Angabe der CPU-/Arbeitsspeichernutzung geöffnet.

Die Vorteile der Multi-Prozess-Architektur in Chrome

Ich habe bereits erwähnt, dass Chrome mehrere Renderer-Prozesse verwendet. Im einfachsten Fall hat jeder Tab einen eigenen Rendererprozess. Angenommen, Sie haben drei Tabs geöffnet und jeder Tab wird von einem unabhängigen Renderer-Prozess ausgeführt.

Wenn ein Tab nicht mehr reagiert, können Sie ihn schließen und fortfahren, während andere Tabs aktiv bleiben. Wenn alle Tabs in einem Prozess ausgeführt werden und ein Tab nicht mehr reagiert, dann auch nicht. Das ist schade.

Mehrere Renderer für Tabs
Abbildung 10: Diagramm mit mehreren Prozessen, die jeden Tab ausführen

Ein weiterer Vorteil der Aufteilung der Browserarbeit in mehrere Prozesse sind Sicherheit und Sandboxing. Da Betriebssysteme eine Möglichkeit bieten, die Berechtigungen von Prozessen einzuschränken, kann der Browser bestimmte Prozesse aus bestimmten Funktionen in einer Sandbox ausführen. Beispielsweise schränkt der Chrome-Browser den Zugriff auf beliebige Dateien für Prozesse ein, die beliebige Nutzereingaben verarbeiten, z. B. den Renderer-Prozess.

Da Prozesse über einen eigenen privaten Speicherbereich verfügen, enthalten sie häufig Kopien gemeinsamer Infrastruktur wie V8, die JavaScript-Engine von Chrome. Dies bedeutet mehr Arbeitsspeichernutzung, da sie nicht so geteilt werden können, wie sie es wären, wenn es Threads im selben Prozess wäre. Chrome schränkt die Anzahl der Prozesse, die gestartet werden können, ein, um Arbeitsspeicher zu sparen. Das Limit hängt davon ab, wie viel Arbeitsspeicher und CPU-Leistung Ihr Gerät hat. Wenn Chrome jedoch das Limit erreicht, werden mehrere Tabs derselben Website in einem Prozess ausgeführt.

Mehr Arbeitsspeicher sparen – Wartung in Chrome

Der gleiche Ansatz wird auf den Browserprozess angewendet. Die Architektur von Chrome wird gerade geändert, um jeden Teil des Browserprogramms als Dienst auszuführen, der es ermöglicht, sich in verschiedene Prozesse aufzuteilen oder zu einem aggregieren.

Grundsätzlich gilt: Wenn Chrome auf leistungsstarker Hardware ausgeführt wird, kann es die einzelnen Dienste in verschiedene Prozesse aufteilen, um mehr Stabilität zu erzielen. Wenn Chrome jedoch auf einem Gerät mit Ressourcenbeschränkung ausgeführt wird, fasst Chrome die Dienste in einem Prozess zusammen, wodurch Speicherplatz belegt wird. Vor dieser Änderung wurde auf Plattformen wie Android ein ähnlicher Ansatz zur Konsolidierung von Prozessen für eine geringere Speichernutzung verwendet.

Chrome-Service
Abbildung 11: Diagramm der Wartung von Chrome, bei der verschiedene Dienste in mehrere Prozesse und in einen einzigen Browserprozess verschoben werden

Renderer-Prozesse pro Frame – Website-Isolierung

Die Website-Isolierung ist eine kürzlich in Chrome eingeführte Funktion, die für jeden websiteübergreifenden iFrame einen separaten Rendererprozess ausführt. Wir haben über einen Renderer-Prozess pro Tabmodell gesprochen, mit dem websiteübergreifende iFrames in einem einzelnen Renderer-Prozess ausgeführt werden konnten, wobei der Speicherplatz zwischen verschiedenen Websites aufgeteilt wurde. Die Ausführung von a.com und b.com im selben Renderer-Prozess scheint in Ordnung zu sein. Die Same Origin Policy ist das zentrale Sicherheitsmodell des Webs. Sie sorgt dafür, dass eine Website nicht ohne Zustimmung auf Daten von anderen Websites zugreifen kann. Das Umgehen dieser Richtlinie ist ein primäres Ziel von Sicherheitsangriffen. Die Prozessisolation ist die effektivste Methode, um Websites voneinander zu trennen. Bei Meltdown und Spectre wurde es noch deutlicher, dass wir Websites mithilfe von Prozessen trennen müssen. Seit Chrome 67 ist die Website-Isolierung auf Computern standardmäßig aktiviert. Jeder websiteübergreifende iFrame in einem Tab erhält einen separaten Rendererprozess.

Website-Isolierung
Abbildung 12: Diagramm der Website-Isolierung; mehrere Rendererprozesse, die auf iFrames innerhalb einer Website verweisen

Die Aktivierung der Website-Isolierung war eine mehrjährige Entwicklungsarbeit. Die Website-Isolierung ist nicht so einfach wie das Zuweisen verschiedener Rendererprozesse. Sie verändert grundlegend die Art und Weise, wie iFrames miteinander kommunizieren. Das Öffnen von Entwicklertools auf einer Seite mit iFrames, die auf verschiedenen Prozessen ausgeführt werden, bedeutete, dass die Entwicklertools hinter den Kulissen arbeiten mussten, um sie nahtlos zu gestalten. Selbst wenn Sie mit Strg + F ein Wort auf einer Seite finden, müssen Sie in verschiedenen Rendererprozessen suchen. Sie sehen, warum die Browserentwickler von der Einführung der Website-Isolierung als wichtigen Meilenstein sprechen.

Zusammenfassung

In diesem Beitrag haben wir einen allgemeinen Überblick über die Browserarchitektur und die Vorteile einer Multi-Prozess-Architektur erörtert. Wir haben auch die Servicification und Website-Isolierung in Chrome behandelt, die einen tiefgreifenden Bezug zur Multi-Prozess-Architektur haben. Im nächsten Beitrag befassen wir uns damit, was zwischen diesen Prozessen und Threads passiert, damit wir eine Website anzeigen können.

Hat Ihnen der Beitrag gefallen? Wenn du Fragen oder Vorschläge für den zukünftigen Beitrag hast, würde ich mich freuen, von dir unter @kosamari auf Twitter zu hören.

Nächste Seite: Was passiert in der Navigation?