RenderingNG

Bereit für die nächste Generation von Webinhalten

RenderingNG ist eine Rendering-Architektur der nächsten Generation, die die Leistung der Vorgängerversion deutlich übertrifft. RenderingNG wurde über einen Zeitraum von mehr als acht Jahren entwickelt und ist das Ergebnis der gemeinsamen Arbeit vieler engagierter Chromium-Entwickler. Es bietet ein enormes Potenzial für schnelle, flüssige, zuverlässige, responsive und interaktive Webinhalte.

Hier erfahren Sie, was wir entwickelt haben, warum wir es entwickelt haben und wie es funktioniert.

Nordsternziel

Das übergeordnete Ziel von RenderingNG ist es, dass die Browser-Engine-Implementierung und die Vielfalt ihrer Rendering-APIs kein begrenzender Faktor für die UX im Web sein sollten.

Sie müssen sich keine Sorgen machen, dass Browserfehler Funktionen unzuverlässig machen oder das Rendering Ihrer Website beeinträchtigen.

Es sollten keine mysteriösen Leistungseinbrüche auftreten. Außerdem sollten Sie keine fehlenden integrierten Funktionen umgehen müssen.

Es sollte einfach funktionieren.

RenderingNG ist ein großer Schritt in Richtung dieses Ziels. Vor RenderingNG konnten wir Renderingfunktionen hinzufügen und die Leistung verbessern, hatten aber Schwierigkeiten, diese Funktionen für Entwickler zuverlässig zu machen. Außerdem gab es viele Leistungseinbrüche. Jetzt haben wir eine Architektur, die viele dieser Probleme systematisch beseitigt und auch erweiterte Funktionen freischaltet, die zuvor nicht als realisierbar galten. Die DSGVO hat folgenden Zweck:

• Solide Kernfunktionen für verschiedene Kombinationen von Plattformen, Geräten und Betriebssystemen
• Sie bietet eine vorhersehbare und zuverlässige Leistung.
• Maximiert die Nutzung der Hardwarefunktionen (Kerne, GPU, Bildschirmauflösung, Bildwiederholraten, Low-Level-Raster-APIs).
• Es werden nur die Arbeitsschritte ausgeführt, die zum Anzeigen sichtbarer Inhalte erforderlich sind.
• Bietet integrierte Unterstützung für gängige Muster für visuelles Design, Animation und Interaktionsdesign.
• Bietet APIs für Entwickler, um die Renderingkosten einfach zu verwalten.
• Bietet Erweiterungspunkte für die Rendering-Pipeline für Entwickler-Add-ons.
• Alle Inhalte werden optimiert: HTML, CSS, 2D-Canvas, 3D-Canvas, Bilder, Video und Schriftarten.

Vergleich mit anderen Browser-Rendering-Engines

Gecko und WebKit haben auch die meisten der in diesen Blogposts beschriebenen Architekturmerkmale implementiert und in einigen Fällen sogar vor Chromium hinzugefügt.

Wenn ein Browser schneller und zuverlässiger wird, ist das ein Grund zur Freude und hat echte Auswirkungen. Das ultimative Ziel besteht darin, die Baseline für alle Browser zu verbessern, damit Entwickler darauf vertrauen können.

Die Erfolgspyramide

Meiner Meinung nach ist Erfolg das Ergebnis von Zuverlässigkeit, skalierbarer Leistung und schließlich der Erweiterbarkeit.

Wie bei einer echten Pyramide bildet jede Ebene eine solide Grundlage für die darüber liegende Ebene.

Zuverlässigkeit

Wenn reichhaltige und komplexe Nutzererfahrungen überhaupt möglich sein sollen, ist als Erstes eine solide Plattform erforderlich. Die Hauptfunktionen und die zugrunde liegenden Technologien müssen ordnungsgemäß funktionieren und auch langfristig funktionieren. Ebenso wichtig ist es, dass diese Funktionen gut zusammenpassen und keine merkwürdigen Verhaltensweisen oder Fehler in Grenzfällen aufweisen.

Aus diesem Grund ist Zuverlässigkeit der wichtigste Aspekt von RenderingNG. Zuverlässigkeit ist das Ergebnis guter Tests, hochwertiger Feedbackschleifen, Messwerte und Software-Designmuster.

Um Ihnen einen Eindruck davon zu vermitteln, wie wichtig ich Zuverlässigkeit finde: Wir haben die meiste Zeit der letzten acht Jahre damit verbracht, genau diesen Aspekt zu optimieren. Zuerst haben wir uns ein umfassendes Wissen über das System angeeignet. Wir haben aus Fehlerberichten gelernt, wo die Schwachstellen lagen, und diese behoben, umfassende Tests durchgeführt und die Leistungsanforderungen von Websites und die Leistungseinschränkungen von Chromium ermittelt. Anschließend haben wir wichtige Designmuster und Datenstrukturen sorgfältig und schrittweise entworfen und eingeführt. Erst dann waren wir bereit, wirklich moderne Primitive für responsives Design, Skalierbarkeit und Anpassung des Renderings hinzuzufügen.

Das heißt nicht, dass in dieser Zeit nichts an Chromium verbessert wurde. Ganz im Gegenteil! In diesen Jahren konnten wir die Zuverlässigkeit und Leistung kontinuierlich steigern, indem wir jede Verbesserung Schritt für Schritt umsetzten.

Tests und Messwerte

In den letzten acht Jahren haben wir Zehntausende von Unit-, Leistungs- und Integrationstests hinzugefügt. Außerdem haben wir umfassende Messwerte entwickelt, mit denen viele Aspekte des Renderings von Chromium in lokalen Tests, in Leistungsbenchmarks und in der Praxis auf echten Websites mit echten Nutzern und Geräten gemessen werden.

Aber egal, wie gut RenderingNG (oder die Rendering-Engine eines anderen Browsers) ist, es ist immer noch nicht einfach, für das Web zu entwickeln, wenn es viele Fehler oder Unterschiede im Verhalten zwischen den Browsern gibt. Um dies zu erreichen, nutzen wir auch Tests für die Webplattform. Bei jedem dieser Tests wird ein Nutzungsmuster der Webplattform überprüft, das alle Browser bestehen sollten. Außerdem beobachten wir genau die Messwerte, um im Laufe der Zeit mehr Tests zu bestehen und die Kompatibilität mit der Hauptversion zu erhöhen.

Webplattformtests sind eine gemeinsame Anstrengung. So haben Chromium-Entwickler beispielsweise nur etwa 10% der gesamten WPT-Tests für CSS-Funktionen hinzugefügt. Der Rest stammt von anderen Browseranbietern, unabhängigen Mitwirkenden und Spezifikationsautoren. Es braucht ein ganzes Dorf, um das interoperable Web zu entwickeln.

Gute Software-Designmuster

Die zuverlässige Bereitstellung hochwertiger Software ist wiederum viel einfacher, wenn der Code leicht verständlich ist und so gestaltet ist, dass die Wahrscheinlichkeit von Fehlern minimiert wird. In den nächsten Blogposts werden wir noch viel mehr über das Softwaredesign von RenderingNG erzählen.

Skalierbare Leistung

Die Leistung in Bezug auf Geschwindigkeit, Speicher und Stromverbrauch zu optimieren, ist der zweitwichtigste Aspekt von RenderingNG. Wir möchten, dass die Interaktionen mit allen Websites reibungslos und reaktionsschnell ablaufen, ohne dass die Stabilität des Geräts beeinträchtigt wird.

Aber wir wollen nicht nur Leistung, wir wollen skalierbare Leistung – eine Architektur, die auf Low-End- und High-End-Rechnern sowie auf verschiedenen Betriebssystemplattformen zuverlässig funktioniert. Ich nenne das Hochskalieren – das Ausschöpfen aller Möglichkeiten des Hardwaregeräts – und Herunterskalieren – die Effizienz maximieren und bei Bedarf die Anforderungen an das System reduzieren.

Dazu mussten wir Caching, Leistungsisolierung und GPU-Hardwarebeschleunigung optimal nutzen. Sehen wir uns diese der Reihe nach an. Um es konkreter zu machen, lassen Sie uns überlegen, wie jedes dieser Elemente zur Leistung einer äußerst wichtigen Interaktion auf Webseiten beiträgt: dem Scrollen.

Caching

Bei einer dynamischen, interaktiven Benutzeroberfläche wie dem Web ist das Caching die wichtigste Möglichkeit, die Leistung drastisch zu verbessern. Die bekannteste Art des Cachings in einem Browser ist der HTTP-Cache. Beim Rendering gibt es aber auch viele Caches. Der wichtigste Cache für das Scrollen sind zwischengespeicherte GPU-Texturen und Displaylisten, die ein extrem schnelles Scrollen ermöglichen, den Akkuverbrauch minimieren und auf einer Vielzahl von Geräten gut funktionieren.

Das Caching wirkt sich positiv auf die Akkulaufzeit und die Framerate der Animation beim Scrollen aus. Noch wichtiger ist jedoch, dass die Leistungsisolierung vom Hauptthread aufgehoben wird.

Leistungsisolierung

Auf modernen Desktop-Computern müssen Sie sich keine Sorgen machen, dass Hintergrundanwendungen die Anwendung verlangsamen, in der Sie gerade arbeiten. Das liegt an der präemptiven Multitasking-Technologie, die wiederum eine Form der Leistungsisolierung ist: Sie sorgt dafür, dass unabhängige Aufgaben sich nicht gegenseitig verlangsamen.

Im Web ist das Scrollen das beste Beispiel für die Leistungsisolierung. Selbst auf Websites mit viel langsamem JavaScript kann das Scrollen sehr flüssig sein, da es in einem anderen Thread ausgeführt wird, der nicht vom JavaScript- und Layout-Thread abhängig sein muss. Wir haben viel Arbeit in RenderingNG investiert, um dafür zu sorgen, dass jede mögliche Scrollbewegung gethreadet wird. Dazu nutzen wir ein Caching, das weit über eine Anzeigeliste hinausgeht und auch komplexere Situationen abdeckt. Beispiele hierfür sind Code zur Darstellung von fixierten und fixierten Elementen, passive Ereignis-Listener und eine hochwertige Textdarstellung.

GPU-Beschleunigung

Eine GPU ermöglicht das Generieren von Pixeln und das Zeichnen auf dem Bildschirm deutlich schneller. In vielen Fällen kann jedes Pixel parallel zu jedem anderen Pixel gezeichnet werden, was zu einer enormen Geschwindigkeitssteigerung führt. Eine wichtige Komponente von RenderingNG ist das GPU-Raster und das Zeichnen überall. Dabei wird die GPU auf allen Plattformen und allen Geräten verwendet, um das Rendern und Animieren von Webinhalten extrem zu beschleunigen. Das ist besonders wichtig bei Low-End- oder High-End-Geräten, die oft eine viel leistungsstärkere GPU als andere Teile des Geräts haben.

Erweiterbarkeit: Die richtigen Tools für die Aufgabe

Sobald wir Zuverlässigkeit und skalierbare Leistung erreicht haben, können wir eine Vielzahl von Tools hinzufügen, mit denen Entwickler die integrierten Teile von HTML, CSS und Canvas erweitern können – und zwar so, dass die hart erkämpfte Leistung und Zuverlässigkeit nicht beeinträchtigt wird.

Dazu gehören integrierte und JavaScript-APIs für erweiterte Anwendungsfälle von responsivem Design, progressives Rendering, flüssige und responsive Darstellung sowie Thread-Rendering.

Die folgenden Open-Web-APIs, die von Chromium unterstützt werden, wurden durch RenderingNG ermöglicht und galten zuvor als nicht realisierbar.

Alle wurden mit offenen Spezifikationen und in Zusammenarbeit mit Partnern des offenen Webs entwickelt – Entwicklern anderer Browser, Experten und Webentwicklern. In den nächsten Blogbeiträgen werden wir uns mit diesen einzelnen Funktionen befassen und erklären, wie sie mit RenderingNG möglich sind.

• content-visibility: Mit diesem Attribut können Websites das Rendern von Inhalten außerhalb des Bildschirms ganz einfach vermeiden und das Rendern für derzeit nicht angezeigte Ansichten von Single-Page-Anwendungen im Cache speichern.
• OffscreenCanvas: Ermöglicht das Canvas-Rendering (sowohl die 2D Canvas API als auch WebGL) in einem eigenen Thread für eine zuverlässig hervorragende Leistung. Dieses Projekt ist auch ein weiterer wichtiger Meilenstein für das Web: Es ist die erste Web-API, mit der JavaScript (oder WebAssembly) ein einzelnes Webseitendokument aus mehreren Threads rendern kann.
• Containerabfragen: Damit kann eine einzelne Komponente responsiv layoutet werden, was die Verwendung einer ganzen Reihe von Plug-and-Play-Komponenten ermöglicht. Diese Funktion befindet sich derzeit in der Testphase.
• Ursprungsisolation: Mit dieser Funktion können Websites eine bessere Leistungsisolierung zwischen Iframes aktivieren.
• Paint Worklets außerhalb des Hauptthreads: Entwickler können mit Code, der im Compositor-Thread ausgeführt wird, die Darstellung von Elementen erweitern.

Neben expliziten Web-APIs konnten wir mit RenderingNG mehrere sehr wichtige „automatische Funktionen“ einführen, von denen alle Websites profitieren:

• Website-Isolierung: Iframes verschiedener Herkunft werden in verschiedene CPU-Prozesse verschoben, um die Sicherheit und Leistungsisolierung zu verbessern.
• Vulkan, D3D12 und Metal: Hier werden APIs der unteren Ebene verwendet, die GPUs effizienter nutzen als OpenGL.
• Mehr zusammengesetzte Animationen: SVG, Hintergrundfarbe.

Weitere bevorstehende Funktionen, die durch RenderingNG möglich werden, sind:

• Mit dem Scrollen verknüpfte Animationen
• Verstecktes, aber suchbares und zugängliches DOM
• Übergänge für gemeinsame Elemente
• Benutzerdefiniertes Layout
• Komposition außerhalb des Hauptthreads; Entkoppelung von Threading und Komposition

Wichtige Projekte, aus denen RenderingNG besteht

Hier ist eine Liste der wichtigsten Projekte in RenderingNG.

CompositeAfterPaint

Mit CompositeAfterPaint wird das Compositing von Stil, Layout und Paint getrennt. Das ermöglicht eine deutlich verbesserte Zuverlässigkeit und vorhersehbare Leistung, einen höheren Durchsatz und einen geringeren Arbeitsspeicherverbrauch ohne Einbußen bei der Leistung.

LayoutNG

Alle Layoutalgorithmen wurden von Grund auf neu geschrieben, um die Zuverlässigkeit erheblich zu verbessern und die Leistung vorhersehbarer zu machen.

LayoutNG

BlinkNG

Wir haben die Blink-Rendering-Engine überarbeitet und in klar voneinander getrennte Pipeline-Phasen unterteilt. Dies ermöglicht ein besseres Caching, eine höhere Zuverlässigkeit und Funktionen für wiederholtes oder verzögertes Rendering wie Inhaltssichtbarkeit und Containerabfragen.

GPU-Beschleunigung überall

Die GPU-Beschleunigung bietet eine enorme Geschwindigkeitssteigerung für die meisten Inhalte, da jedes Pixel parallel verarbeitet werden kann. Es ist auch eine effektive Methode, um die Leistung auf Low-End-Geräten zu verbessern, die in der Regel noch eine GPU haben.

Threaded Scrolling, Animationen und Dekodierung

Langfristige Bemühungen, alle Scroll-Vorgänge, nicht layoutinduzierenden Animationen und die Bilddekodierung aus dem Hauptthread zu entfernen. Die Prüfung ist noch nicht abgeschlossen.

Viz

Ein zentraler Raster- und Zeichenprozess für Chromium, der den Durchsatz erhöht, den Arbeitsspeicher optimiert und die Hardwarefunktionen optimal nutzt. Es hat auch andere Vorteile, die für Webentwickler weniger sichtbar, aber für Nutzer sehr deutlich sind, z. B. die Aufhebung der Blockierung der Website-Isolierung und die Entkopplung der Rendering-Pipeline vom Browser-UI-Rendering.

Definitionen der Begriffe im Diagramm oben:

OOP-D

Out-of-Process-Display-Compositor. Das Display-Compositing ist die gleiche Art von Aktivität wie ein Betriebssystem-Compositor. „Out of Process“ bedeutet, dass die Ausführung im Viz-Prozess statt im Renderprozess der Webseite oder im Browser-UI-Prozess erfolgt.

OOP-R

Out-of-Process-Raster. Raster wandelt Displaylisten in Pixel um. „Out of Process“ bedeutet, dass die Ausführung im Viz-Prozess statt im Renderprozess der Webseite erfolgt.

SkiaRenderer

Eine neue Implementierung des Displaykompositeurs, die die Ausführung auf einer Reihe verschiedener zugrunde liegender GPU-APIs wie Vulkan, D3D12 oder Metal unterstützen kann.

Threadbasiertes und beschleunigtes Canvas-Rendering

Dieses Projekt hat OffscreenCanvas ermöglicht.

VideoNG

VideoNG ist ein langfristiger Ansatz, um eine effiziente, zuverlässige und hochwertige Videowiedergabe im Web zu ermöglichen.

Definitionen der Begriffe im Diagramm oben:

Mojo

Ein IPC-Subsystem der nächsten Generation für Chromium.

Plattform/Oberfläche

Ein Konzept, das Teil des Viz-Projektdesigns ist.

---

Illustrationen von Una Kravets.