Gotowy na wprowadzenie nowej generacji treści internetowych
RenderingNG to architektura renderowania nowej generacji, która znacznie przewyższa dotychczasowe. Rozwiązanie RenderingNG powstało przez ponad 8 lat i reprezentuje zbiorową pracę wielu oddanych programistów Chromium. Zapewniają ogromny potencjał tworzenia szybkich, płynnych, niezawodnych, elastycznych i interaktywnych treści internetowych.
Dowiesz się, co i dlaczego stworzyliśmy oraz jak działa.
Cel Gwiazdy Północnej
Gwiazdą północną motywującą RenderingNG jest to, że wdrożenie silnika przeglądarki i bogactwo dostępnych w nim interfejsów API renderowania nie powinny być czynnikiem ograniczającym UX w internecie.
Nie musisz się martwić, że błędy w przeglądarce spowodują, że funkcje będą zawodne lub zakłócą renderowanie witryny.
Nie powinno być żadnych tajemniczych spadków wydajności. Nie musisz też przejmować się brakujących wbudowanych funkcji.
To powinno po prostu zadziałać.
RenderingNG to ogromny krok na drodze do celu gwiazdy północnej. Wcześniej mogliśmy dodać funkcje renderowania i zwiększyć wydajność, ale trudno było nam zapewnić wiarygodność tych funkcji dla programistów, a to, co działo się dalej, doprowadziło do spadku wydajności. Teraz mamy architekturę, która systematycznie eliminuje wiele z tych problemów i odblokowuje zaawansowane funkcje, które wcześniej nie były uznawane za możliwe. Oto one:
- Oferuje solidne, podstawowe funkcje działające na różnych platformach, urządzeniach i w różnych systemach operacyjnych.
- Przewidywalna i niezawodna skuteczność.
- Maksymalizuje wykorzystanie możliwości sprzętowych (rdzeni, GPU, rozdzielczości ekranu, częstotliwości odświeżania, niskopoziomowych interfejsów API rastrowych).
- Wykonuje tylko te czynności, które są niezbędne do wyświetlenia widocznej treści.
- Ma wbudowaną obsługę popularnych projektów wizualnych, animacji i interakcji.
- Udostępnia interfejsy API dla programistów umożliwiające łatwe zarządzanie kosztami renderowania.
- Udostępnia punkty rozszerzenia potoku renderowania dla dodatków programisty.
- Optymalizuje wszystkie treści – HTML, CSS, kanwy 2D, kanwy 3D, obrazy, filmy i czcionki.
Porównanie z innymi silnikami renderowania w przeglądarce
Gecko i Webkit wdrożyły też większość funkcji architektonicznych opisanych w tych postach na blogu, a w niektórych przypadkach dodaliśmy je nawet przed Chromium.
Szybsze i bardziej niezawodne przeglądarki to właśnie powód do śmiechu i mają wymierne skutki. Głównym celem jest ulepszenie podstawowych funkcji we wszystkich przeglądarkach, aby deweloperzy mogli na nich polegać.
Piramida sukcesu
Moja filozofia mówi, że sukces jest wynikiem pierwszego osiągnięcia niezawodności, potem skalowalności i elastyczności.
Tak jak w rzeczywistej piramidzie, każdy poziom stanowi solidny fundament do przejścia na kolejny poziom.
Niezawodność
Jeśli chcesz, aby zaawansowane i złożone wrażenia użytkownika były w ogóle możliwe, najpierw potrzebujemy solidnej platformy. Podstawowe funkcje i podstawy muszą działać prawidłowo i działać nieprzerwanie. Równie ważne jest to, aby były one dobrze komponowane i nie zawierały dziwnych błędów skrajnych ani błędów.
Z tego powodu niezawodność jest najważniejszym elementem RenderingNG. Niezawodność jest wynikiem dobrych testów, pętli informacji zwrotnych o jakości, wskaźników i wzorców projektu oprogramowania.
Aby pokazać, jak ważna jest dla mnie niezawodność, przez większość ostatnich 8 lat pracowaliśmy nad tą kwestią. Po pierwsze zgłębiliśmy głębię wiedzy o systemie – ucząc się na podstawie raportów o błędach i naprawiania problemów, przeprowadzając kompleksowe testy, poznaliśmy potrzeby witryn w zakresie wydajności oraz ograniczenia w wydajności Chromium. Następnie starannie i stopniowo opracowaliśmy oraz wdrożyliśmy kluczowe wzorce projektowe i struktury danych. Dopiero wtedy mogliśmy dodać naprawdę podstawowe elementy nowej generacji do elastycznego projektowania, skalowalności i dostosowania renderowania.
Nie oznacza to, że przez ten czas nie wprowadziliśmy żadnych ulepszeń w Chromium. W rzeczywistości jest inaczej! W tych latach odnotowaliśmy stały i utrzymujący się wzrost niezawodności i wydajności, ponieważ refaktoryzowaliśmy i wdrażaliśmy poszczególne ulepszenia krok po kroku.
Testowanie i dane
W ciągu ostatnich 8 lat dodaliśmy dziesiątki tysięcy testów jednostkowych, wydajności i integracji. Opracowaliśmy też szczegółowe dane mierzące wiele aspektów działania renderowania w Chromium podczas testów lokalnych, testów porównawczych wydajności i nie tylko w prawdziwych witrynach, w tym z udziałem prawdziwych użytkowników i urządzeń.
Jednak niezależnie od tego, jak świetny jest mechanizm renderowania (lub mechanizm renderujący z innej przeglądarki), i tak nie będzie łatwo opracować go do użycia w internecie, jeśli będzie wiele błędów lub różnic w działaniu przeglądarek. Aby rozwiązać ten problem, wykorzystujemy też testy platformy internetowej. Każdy z tych testów weryfikuje wzorzec użytkowania platformy internetowej, który powinny spełniać wszystkie przeglądarki. Uważnie monitorujemy też wskaźniki pod kątem przebiegu większej liczby testów z upływem czasu i zwiększania zgodności rdzeni.
Testy Web Platform to praca zespołowa. Na przykład inżynierowie Chromium dodali tylko około 10% wszystkich testów WPT pod kątem funkcji CSS. Resztę dodają inni dostawcy przeglądarek, niezależni współtwórcy i autorzy specyfikacji. Aby stworzyć interoperacyjną sieć, potrzeba wioski!
Dobre wzorce projektowe oprogramowania
Sprawne dostarczanie oprogramowania wysokiej jakości jest z kolei o wiele łatwiejsze, jeśli kod jest zrozumiały i zaprojektowany w sposób, który minimalizuje prawdopodobieństwo błędów. W kolejnych postach na blogu przedstawimy więcej informacji o projektowaniu oprogramowania RenderingNG.
Skalowalna wydajność
Kolejnym najważniejszym aspektem renderowania NG jest osiągnięcie wysokiej wydajności, jeśli chodzi o szybkość, pamięć i wykorzystanie mocy. Chcemy, aby interakcje ze wszystkimi stronami były płynne i responsywne, a jednocześnie nie tracić stabilności urządzenia.
Zależy nam nie tylko na wydajności, ale także o skalowalności – architektury, która działa niezawodnie na komputerach niskiej jakości i wysokiej klasy, a także na różnych platformach operacyjnych. Nazywam to skalowaniem w górę, wykorzystując wszystkie możliwości, jakie zapewnia urządzenie sprzętowe, i skalując je w dół, maksymalizując wydajność i ograniczając w razie potrzeby zapotrzebowanie systemu.
Aby to osiągnąć, musieliśmy maksymalnie wykorzystać pamięć podręczną, izolację wydajności i akcelerację sprzętową GPU. Przyjrzyjmy się teraz każdemu po kolei. Aby to sprecyzować, zastanówmy się, w jaki sposób każdy z nich przyczynia się do skuteczności jednej niezwykle ważnej interakcji na stronach internetowych, czyli przewijania.
Zapisywanie w pamięci podręcznej
W przypadku dynamicznej i interaktywnej platformy UI, takiej jak internet, buforowanie to najważniejszy sposób na znaczne zwiększenie wydajności. Najbardziej znanym rodzajem buforowania w przeglądarce jest pamięć podręczna HTTP, ale renderowanie ma też wiele takich pamięci. Najważniejszą pamięcią podręczną do przewijania są tekstury GPU zapisane w pamięci podręcznej i listy wyświetlania. Umożliwiają one bardzo szybkie przewijanie, minimalizując jednocześnie zużycie baterii i zapewniają dobre działanie na różnych urządzeniach.
Pamięć podręczna pomaga wydłużyć czas pracy na baterii i liczbę klatek animacji podczas przewijania, ale jeszcze ważniejsze jest odizolowanie wydajności od wątku głównego.
Izolacja wydajności
Na nowoczesnych komputerach nie trzeba się martwić, że aplikacje działające w tle spowalniają pracę. Dzieje się tak przez prewencyjną wielozadaniowość, która z kolei jest formą izolacji wydajności: dbanie o to, aby niezależne zadania nie spowalniały siebie nawzajem.
W internecie najlepszym przykładem izolacji wydajności jest przewijanie. Nawet w przypadku witryn z dużą ilością powolnego JavaScriptu przewijanie może być bardzo płynne, ponieważ działa w innym wątku, który nie jest zależny od JavaScriptu ani wątku układu. Włożyliśmy wiele wysiłku w renderingNG, aby każde możliwe przewijanie było podzielone na wątki. Przechowywanie danych w pamięci podręcznej wykracza poza zwykłe listy do wyświetlania w bardziej złożonych sytuacjach. Przykładem może być kod reprezentujący stałe i przyklejone elementy, pasywne detektory zdarzeń oraz wysokiej jakości renderowanie tekstu.
Przyspieszenie GPU
GPU znacznie przyspiesza generowanie pikseli i rysowanie na ekranie – w wielu przypadkach można rysować równolegle każdy piksel, co powoduje ogromny wzrost szybkości. Kluczowym komponentem funkcji RenderingNG jest rastrowanie GPU i rysowanie wszędzie. Wykorzystuje procesor graficzny na wszystkich platformach i na wszystkich urządzeniach, aby znacznie przyspieszyć renderowanie i animowanie treści z internetu. Jest to szczególnie ważne na słabszych urządzeniach lub bardzo wysokiej jakości, które często mają znacznie lepszy GPU niż inne części.
Rozszerzalność: odpowiednie narzędzia do każdego zadania
Po uzyskaniu niezawodności i skalowalnej wydajności możemy opracować szereg narzędzi, które pomogą programistom w rozwijaniu wbudowanych elementów kodu HTML, CSS i Canvas oraz w sposób, który pozwoli uniknąć strat w tej ciężkiej wydajności i niezawodności.
Obejmuje to wbudowane oraz ujawnione w języku JavaScript interfejsy API na potrzeby zaawansowanych przypadków użycia elastycznego projektowania, renderowania progresywnego, płynności i responsywności oraz renderowania w wątkach.
Opisane poniżej otwarte interfejsy API, wykorzystywane przez Chromium, stały się możliwe dzięki RenderingNG i wcześniej były uznawane za niemożliwe.
Wszystkie zostały opracowane z otwartą specyfikacją i we współpracy z otwartymi partnerami internetowymi – inżynierami z innych przeglądarek, ekspertami i programistami stron internetowych. W kolejnych postach na blogu szczegółowo omówimy każdy z nich i wyjaśnimy, w jaki sposób możliwe jest dzięki RenderingNG.
- content-visibility: witryny mogą łatwo unikać renderowania treści poza ekranem i renderowanie w pamięci podręcznej w przypadku niewyświetlanych obecnie wyświetleń aplikacji z jedną stroną.
- OffscreenCanvas: umożliwia renderowanie kanw (zarówno interfejs kanw 2D Canvas API, jak i WebGL) w osobnym wątku, co zapewnia bardzo wysoką wydajność. Ten projekt to również kolejny ważny projekt w dziedzinie internetu – jest to pierwszy internetowy interfejs API, który umożliwia JavaScript (lub WebAssembly!) renderowanie pojedynczego dokumentu strony internetowej z wielu wątków.
- Zapytania dotyczące kontenerów: umożliwiają elastyczne układanie się pojedynczego komponentu, odblokowując cały wszechświat gotowych komponentów (obecnie jest w ramach eksperymentalnej implementacji).
- Izolacja źródła: umożliwia witrynom stosowanie większej izolacji wydajności między elementami iframe.
- Worklety malowania poza wątkiem: umożliwiają programistom rozszerzenie sposobu malowania elementów za pomocą kodu uruchamianego w wątku kompozytora.
Oprócz internetowych interfejsów API usługa RenderingNG pozwoliła nam udostępnić kilka ważnych „funkcji automatycznych”, które przynoszą korzyści wszystkim witrynom:
- Izolacja witryn: umieszcza elementy iframe z innych domen w różnych procesach procesora, aby zwiększyć izolację zabezpieczeń i wydajności.
- Vulkan, D3D12 i Metal: korzysta z interfejsów API niższego poziomu, które wykorzystują GPU wydajniej niż OpenGL.
- Bardziej skomponowane animacje: SVG, kolor tła.
W przyszłości udostępnimy także nowe funkcje, które wkrótce zostaną odblokowane przez RenderingNG. Oto niektóre z nich:
- Animacje połączone z przewijaniem
- Ukryty, ale dostępny do wyszukiwania i łatwo dostępny model DOM.
- Przejścia elementów udostępnionych.
- Układ niestandardowy.
- Komponowanie poza wątkiem głównym, usuwanie połączenia wątków i komponowanie.
Kluczowe projekty składające się na RenderingNG
Oto lista kluczowych projektów w ramach RenderingNG.
CompositeAfterPaint
CompositeAfterPaint oddziela komponowanie od stylu, układu i renderowania, co pozwala znacznie zwiększyć niezawodność i przewidywalną wydajność, a także zwiększyć przepustowość i zużywać mniej pamięci bez negatywnego wpływu na wydajność.
| Rok | Postęp |
|---|---|
| 2015 | Wyświetl listy wysyłki. |
| 2017 | Wyślij nowe unieważnienie. |
| 2018 | Drzewa nieruchomości statku – część 1. |
| 2019 | Drzewa nieruchomości statku – część 2. |
| 2021 | Zakończono dostawę projektu. |
LayoutNG
Gruntowne przeredagowanie wszystkich algorytmów układu w celu zwiększenia niezawodności i przewidywalności działania.
Dowiedz się więcej o LayoutNG.
| Rok | Postęp |
|---|---|
| 2019 | Procedura blokowania statku. |
| 2020 | Elastyczność statku, edytowanie. |
| 2021 | Wyślij całą resztę. |
BlinkNG
Zrefaktoryzowaliśmy i wyczyściliśmy silnik renderowania Blink na dobrze oddzielone fazy potoku. Pozwala to na lepszą buforowanie, większą niezawodność oraz funkcje ponownego lub opóźnionego renderowania, takie jak widoczność treści i zapytania dotyczące kontenera.
Przyspieszenie GPU wszędzie
Przyspieszenie GPU zapewnia ogromne przyspieszenie większości treści, ponieważ każdy piksel może być przetwarzany równolegle. Pozwala to też skutecznie poprawić wydajność na słabszych urządzeniach, które zwykle nadal mają GPU.
| Rok | Postęp |
|---|---|
| 2014 | Obsługa kanw. Wysłano przy treściach, które użytkownik musi zaakceptować na urządzeniu z Androidem. |
| 2016 | Wyślij na Macu. |
| 2017 | GPU jest używane podczas ponad 60% wyświetleń stron na Androidzie. |
| 2018 | Możesz wysyłać produkty w systemach Windows, ChromeOS i Android Go. |
| 2019 | Rasteryzacja GPU w wątkach. |
| 2020 | Wyślij pozostałe treści z Androida. |
Przewijanie w wątkach, animacje i dekodowanie
Długoterminowy wysiłek w celu przeniesienia wszystkich przewijanych, niewymagających układu animacji i dekodowania obrazów z głównego wątku. Trwa.
| Rok | Postęp |
|---|---|
| 2011 | Wstępna obsługa przewijania w wątkach i animacji. |
| 2015 | Ściskanie warstw. |
| 2016 | Uniwersalne przewijanie rozszerzone. |
| 2017 | Dekodowanie obrazu w wątku kompozytora. |
| 2018 | Animacje obrazów w wątku kompozytora. |
| 2020 | Zawsze kompozycyjna o stałej pozycji. |
| 2021 | Procentowe animacje przekształceń, animacje SVG. |
Wiz
Scentralizowany proces rastrowania i rysowania dla Chromium, który zwiększa przepustowość, optymalizuje pamięć i pozwala na optymalne wykorzystanie możliwości sprzętowych. Ma też inne zalety, które są mniej widoczne dla programistów stron internetowych, ale bardzo widoczne dla użytkowników. Są to np. odblokowanie izolacji witryn i odłączenie potoku renderowania od renderowania interfejsu przeglądarki.
| Rok | Postęp |
|---|---|
| 2018 | OOP-R jest dostępna na urządzeniach z systemem Android, Mac i Windows. |
| 2019 | Wysłano OOP-D. OOP-R jest dostarczana wszędzie (z wyjątkiem Canvas). Platforma SkiaRenderer jest dostępna w systemie Linux. |
| 2020 | Funkcja SkiaRenderer jest dostępna w systemach Windows i Android. Interfejs Vulkan jest już dostępny na Androidzie. |
| 2021 | Aplikacja SkiaRenderer jest już dostępna na Maca (wkrótce także na ChromeOS). |
Definicje terminów na powyższym wykresie:
- OOP-D
- Kompozytor zasobów displayowych poza procesem. Komponowanie reklam displayowych odbywa się tak samo jak komponent systemu operacyjnego. Poza procesem oznacza to, że robimy to w procesie Viz, a nie w ramach procesu renderowania strony internetowej czy interfejsu użytkownika przeglądarki.
- OOP-R
- Raster poza procesem. Raster konwertuje listy displayowe na piksele. Poza procesem oznacza to, że robimy to w procesie Viz, a nie w ramach procesu renderowania strony.
- SkiaRenderer
- Nowa implementacja komponentu Display Compositor, która obsługuje wykonywanie różnych bazujących na niej interfejsów API GPU, takich jak Vulkan, D3D12 czy Metal.
Przyspieszone i wątkowe renderowanie płótna
To projekt umożliwił twórcom OffscreenCanvas.
| Rok | Postęp |
|---|---|
| 2018 | Wyślij poza ekran. |
| 2019 | Prześlij obiekt ImageBitmapRenderingContext. |
| 2021 | Wyślij OOP-R. |
VideoNG
VideoNG to długofalowy wysiłek w celu zapewnienia wydajnego, niezawodnego i wysokiej jakości odtwarzania filmów w internecie.
| Rok | Postęp |
|---|---|
| 2014 | Wprowadziliśmy platformę renderowania opartą na Mojo. |
| 2015 | Wysłano aplikację Project Butter i nakładki wideo, aby zapewnić płynniejsze renderowanie filmu. |
| 2016 | Przesłano ujednolicone potoki dekodowania i renderowania na urządzeniach z Androidem i komputerach. |
| 2017 | Przesłane filmy w trybie HDR i renderowanie filmów z korektą kolorów. |
| 2018 | Wysłano potok dekodowania wideo oparty na Mojo. |
| 2019 | Wysłano potok renderowania wideo opartego na powierzchni. |
| 2021 | Przesłano obsługę renderowania treści chronionych w 4K w ChromeOS. |
Definicje terminów na powyższym wykresie:
- mojo
- Podsystem IPC nowej generacji dla Chromium.
- Platforma
- Pojęcie to część projektu Viz.
Ilustracje Uny Kravets.