Ein Blick auf moderne Webbrowser (Teil 1)

Mariko Kosaka

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

In dieser vierteiligen Blogreihe beschäftigen wir uns mit dem Chrome-Browser – von der allgemeinen Architektur bis hin zu Details der Rendering-Pipeline. Wenn Sie sich jemals gefragt haben, wie der Browser Ihren Code in eine funktionsfähige Website haben oder Sie sich nicht sicher sind, warum eine bestimmte Technik für die Leistung empfohlen wird. verbessert haben, ist diese Reihe genau das Richtige für Sie.

Im ersten Teil dieser Reihe werfen wir einen Blick auf die wichtigsten Begriffe und die wichtigsten Multi-Prozess-Architektur.

Das Herzstück eines Computers sind die CPU und die GPU.

Um die im Browser ausgeführte Umgebung zu verstehen, von Computerteilen und deren Funktion.

CPU

<ph type="x-smartling-placeholder">
</ph> CPU <ph type="x-smartling-placeholder">
</ph> Abbildung 1: 4 CPU-Kerne als Büroangestellte, die an jedem Schreibtisch sitzen und eingehende Aufgaben erledigen

Das erste ist die Central Processing Unit – oder CPU. Die CPU kann als Ihr das Gehirn eines Computers. Ein CPU-Kern, der hier als Büroangestellter abgebildet ist, kann viele verschiedene Aufgaben erledigen eine nach der anderen. Google Assistant kann alles verarbeiten, von Mathematik bis hin zu Kunst, und weiß, wie man antwortet mit einem Kundengespräch. Früher bestand die meisten CPUs aus einem einzelnen Chip. Ein Kern ist wie eine andere CPU, denselben Chip. Bei moderner Hardware erhalten Sie oft mehr als einen Kern, sodass Sie mehr Rechenleistung erhalten. auf Smartphones und Laptops.

GPU

<ph type="x-smartling-placeholder">
</ph> GPU <ph type="x-smartling-placeholder">
</ph> Abbildung 2: Viele GPU-Kerne mit Schraubenschlüssel, die darauf hinweisen, dass sie eine begrenzte Aufgabe erledigen können

Graffinierter Processing Unit - oder ist ein weiterer GPU-Teil. Im Gegensatz zur CPU Die GPU eignet sich gut für die Verarbeitung einfacher Aufgaben, aber auf mehreren Kernen gleichzeitig. Als Name deutet darauf hin, dass es ursprünglich für die Verarbeitung von Grafiken entwickelt wurde. Deshalb ist es im Kontext von Grafiken „mit GPU“ oder „GPU-gestützt“ mit schnellem Rendering und reibungslosen Interaktionen verbunden. In den letzten Jahren werden dank GPU-beschleunigtem Computing immer mehr Rechenprozesse GPU allein.

Wenn Sie eine Anwendung auf Ihrem Computer oder Smartphone starten, treiben die CPU und die GPU der Anwendung. Normalerweise werden Anwendungen auf der CPU und GPU mit den Mechanismen der Betriebssystem.

<ph type="x-smartling-placeholder">
</ph> Hardware, Betriebssystem, Anwendung <ph type="x-smartling-placeholder">
</ph> Abbildung 3: Drei Schichten der Computerarchitektur. Maschinenhardware unten, Betrieb System in der Mitte und Anwendung oben.

Programm auf Process und Thread ausführen

<ph type="x-smartling-placeholder">
</ph> Prozess und Threads <ph type="x-smartling-placeholder">
</ph> Abbildung 4: Prozess als Begrenzungsrahmen, Threads als abstrakter Fisch, der innerhalb eines Prozesses schwimmt

Ein weiteres Konzept, das man verstehen sollte, bevor man sich mit der Browserarchitektur befasst, sind Process und Thread. Ein Prozess kann als das ausführende Programm einer Anwendung beschrieben werden. Ein Thread ist derjenige, der lebt und führt einen beliebigen Teil des Programms des Prozesses aus.

Wenn Sie eine Anwendung starten, wird ein Prozess erstellt. Das Programm erstellt möglicherweise Threads, um es zu unterstützen aber das ist optional. Das Betriebssystem gibt dem Prozess aus dem Gedächtnis, und der gesamte Anwendungsstatus in diesem privaten Speicher aufbewahrt wird. Wenn Sie die wird der Prozess ebenfalls beendet und das Betriebssystem gibt Arbeitsspeicher frei.

<ph type="x-smartling-placeholder">
</ph> Prozess und Speicher <ph type="x-smartling-placeholder">
</ph> Abbildung 5: Diagramm eines Prozesses, der Arbeitsspeicher nutzt und Anwendungsdaten speichert

Ein Prozess kann das Betriebssystem auffordern, einen anderen Prozess zum Ausführen verschiedener Aufgaben zu starten. Wenn diese werden verschiedene Teile des Speichers für den neuen Prozess zugewiesen. Wenn zwei Prozesse können sie die InterProcessKommunikation (IPC) verwenden. Viele Anwendungen sind so konzipiert, dass sie neu gestartet werden können, wenn ein Worker-Prozess nicht mehr reagiert. ohne andere Prozesse zu beenden, die verschiedene Teile der Anwendung ausführen.

<ph type="x-smartling-placeholder">
</ph> Worker-Prozess und IPC <ph type="x-smartling-placeholder">
</ph> Abbildung 6: Diagramm separater Prozesse, die über IPC kommunizieren

Browserarchitektur

Wie wird nun ein Webbrowser mithilfe von Prozessen und Threads erstellt? Nun, es könnte ein Prozess mit vielen verschiedene Threads oder viele verschiedene Prozesse, bei denen einige Threads über IPC kommunizieren.

<ph type="x-smartling-placeholder">
</ph> Browserarchitektur <ph type="x-smartling-placeholder">
</ph> Abbildung 7: Diagramm mit verschiedenen Browserarchitekturen in Prozessen / Threads

Wichtig dabei ist, dass diese verschiedenen Architekturen Implementierungsdetails sind. Es gibt keine Standardspezifikation dazu, wie ein Webbrowser erstellt werden kann. Der Ansatz eines Browsers kann völlig anders sein könnten.

Für diese Blog-Serie verwenden wir die neue Architektur von Chrome, wie in Abbildung 8 dargestellt.

Oben ist der Browserprozess zu sehen, der mit anderen Prozessen koordiniert ist, die verschiedene App-Bereichs besteht. Für den Renderer-Prozess werden mehrere Prozesse erstellt und den für jeden Tab. Bis vor Kurzem hat Chrome jedem Tab nach Möglichkeit einen Prozess zugewiesen: jetzt wird versucht, jede Website hat einen eigenen Prozess, einschließlich iFrames (siehe Website-Isolierung).

<ph type="x-smartling-placeholder">
</ph> Browserarchitektur <ph type="x-smartling-placeholder">
</ph> Abbildung 8: Diagramm der Multiprozessarchitektur in Chrome. Mehrere Ebenen werden darunter angezeigt Renderer-Prozess zur Darstellung von Chrome, die 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 Bedeutung
Browser Steuert „Chrome“ der Anwendung wie Adressleiste, Lesezeichen, Zurück und Vorwärts-Tasten.
Kann auch die unsichtbaren, privilegierten Bereiche eines Webbrowsers verarbeiten, z. B. Netzwerkanfragen und Dateizugriff.
Renderer Steuert alles innerhalb des Tabs, wo 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 da GPUs Anfragen von mehreren Apps verarbeiten und auf derselben Oberfläche darstellen.
<ph type="x-smartling-placeholder">
</ph> Chrome-Prozesse <ph type="x-smartling-placeholder">
</ph> Abbildung 9: Verschiedene Prozesse, die auf verschiedene Bereiche der Browser-Benutzeroberfläche verweisen

Es gibt noch weitere Prozesse wie den Erweiterungsprozess und Dienstprogrammprozesse. Wenn Sie sehen möchten, wie viele Prozesse in Chrome ausgeführt werden, klicken Sie auf das Optionsmenüsymbol rechts oben, wählen Sie „Weitere Tools“ und dann den Task-Manager aus. Daraufhin wird ein Fenster mit einer Liste der aktuell ausgeführten Prozesse geöffnet. und wie viel CPU/Arbeitsspeicher sie nutzen.

Die Vorteile der Multi-Prozess-Architektur in Chrome

Ich habe bereits erwähnt, dass Chrome mehrere Renderer-Prozesse verwendet. Im einfachsten Fall können Sie Stellen Sie sich vor, jeder Tab hat seinen eigenen Renderer-Prozess. Angenommen, Sie haben drei Tabs geöffnet und jeder von einem unabhängigen Renderer-Prozess.

Wenn ein Tab nicht mehr reagiert, können Sie ihn schließen und fortfahren. andere Tabs lebendig werden. Wenn alle Tabs in einem Prozess ausgeführt werden und ein Tab nicht mehr reagiert, werden alle die Tabs reagieren nicht. Das ist schade.

<ph type="x-smartling-placeholder">
</ph> Mehrere Renderer für Tabs <ph type="x-smartling-placeholder">
</ph> Abbildung 10: Diagramm mit mehreren Prozessen, die jeden Tab ausführen

Ein weiterer Vorteil der Aufteilung der Browserarbeit in mehrere Prozesse ist die Sicherheit und Sandboxing. Da Betriebssysteme eine Möglichkeit bieten, die Verfügbarkeit von Prozessen Berechtigungen, der Browser bestimmte Prozesse von bestimmten Funktionen in einer Sandbox ausführen. Der Chrome-Browser schränkt z. B. Beliebiger Dateizugriff für Prozesse, die beliebige Nutzereingaben verarbeiten, z. B. den Renderer-Prozess.

Da Prozesse ihren eigenen privaten Speicher haben, enthalten sie oft Kopien gängiger -Infrastruktur (wie V8, die JavaScript-Engine von Chrome). Das bedeutet mehr Arbeitsspeichernutzung, Sie können nicht so geteilt werden, wie sie es wären, wenn sie Threads innerhalb desselben Prozesses wären. Um Arbeitsspeicher zu sparen, beschränkt Chrome die Anzahl der Prozesse, die gestartet werden können. Das Limit hängt davon ab, wie viel Arbeitsspeicher und CPU-Leistung Ihr Gerät hat. Wenn Chrome jedoch werden mehrere Tabs von derselben Website in einem Vorgang ausgeführt.

Mehr Arbeitsspeicher einsparen – Bereitstellung in Chrome

Der gleiche Ansatz wird auf den Browserprozess angewendet. Änderungen an der Architektur von Chrome Jeder Teil des Browserprogramms kann als Dienst ausgeführt werden, der die Aufteilung in verschiedene Prozesse ermöglicht. oder zu einem zusammenfassen.

Generell gilt, dass Chrome, wenn es auf leistungsstarker Hardware ausgeführt wird, die einzelnen Dienste möglicherweise in verschiedene Prozesse gibt es mehr Stabilität. Auf einem Gerät mit Ressourcenbeschränkungen und fasst Dienste in einem Prozess zusammen, wodurch Speicherplatz eingespart wird. Ähnlicher Ansatz zur Konsolidierung wurden schon vor dieser Änderung auf Plattformen wie Android Prozesse zur geringeren Speichernutzung genutzt.

<ph type="x-smartling-placeholder">
</ph> Chrome-Bereitstellung <ph type="x-smartling-placeholder">
</ph> Abbildung 11: Diagramm der Bereitstellung verschiedener Dienste in Chrome in mehrere Prozesse und einem einzigen Browserprozess,

Renderer-Prozesse pro Frame – Website-Isolierung

Die Website-Isolierung wurde kürzlich eine neue Funktion in Chrome, mit der für jeden websiteübergreifenden iFrame ein separater Rendererprozess ausgeführt wird. Wir haben über einen Renderer-Prozess pro Tabmodell gesprochen, wodurch iFrames so, dass sie in einem einzigen Renderer-Prozess mit gemeinsam genutztem Arbeitsspeicher zwischen verschiedenen Websites ausgeführt werden. Die Ausführung von a.com und b.com im selben Renderer-Prozess scheint in Ordnung zu sein. Die Richtlinie für denselben Ursprung ist das zentrale Sicherheitsmodell des Webs. Sie sorgt dafür, dass eine Website nicht auf Daten von anderen Websites zugreifen kann. ohne Zustimmung. Das Umgehen dieser Richtlinie ist eines der Hauptziele von Sicherheitsangriffen. Die Prozessisolation ist die effektivste Methode, Websites voneinander zu trennen. Mit Meltdown und Spectre wurde es noch deutlicher, dass wir Websites mithilfe von Prozessen trennen müssen. Wenn die Website-Isolierung auf Computern seit Chrome 67 standardmäßig aktiviert ist, wird jeder websiteübergreifende iFrame in einem Tab einen separaten Renderer-Prozess.

<ph type="x-smartling-placeholder">
</ph> Website-Isolierung <ph type="x-smartling-placeholder">
</ph> Abbildung 12: Diagramm der Website-Isolierung Mehrere Renderer-Prozesse, die auf iFrames innerhalb einer Website verweisen

Die Aktivierung der Website-Isolierung ist eine mehrjährige technische Unterbrechung. Website-Isolierung ist nicht so einfach wie die Zuweisung verschiedener Renderer-Prozesse, die Kommunikation zwischen den iFrames Sonstiges. Wenn Entwicklertools auf einer Seite mit iFrames auf verschiedenen Prozessen geöffnet werden, hinter die Kulissen zu integrieren, damit alles nahtlos erscheint. Mit der Tastenkombination Strg+F finden Sie Wort auf einer Seite bedeutet, in verschiedenen Rendererprozessen zu suchen. Sie sehen den Grund dafür, Browserentwickler sprechen über die Einführung der Website-Isolierung als wichtigen Meilenstein.

Zusammenfassung

In diesem Beitrag haben wir einen groben Überblick über die Browser-Architektur und die Vorteile eines Multi-Prozess-Architektur. Wir haben auch die Servicifikation und Website-Isolierung in Chrome behandelt. ist eng mit der Multi-Prozess-Architektur verbunden. Im nächsten Beitrag beschäftigen wir uns damit, zwischen diesen Prozessen und Threads geschieht, um eine Website anzuzeigen.

Hat Ihnen der Beitrag gefallen? Wenn Sie Fragen oder Vorschläge für den nächsten Beitrag haben, von Ihnen unter @kosamari auf Twitter hören.

Nächstes Thema: Navigation