Gotowość na nową generację treści internetowych
RenderingNG to architektura renderowania nowej generacji, która znacznie przewyższa wydajność poprzednich wersji. RenderingNG powstawał przez ponad 8 lat i jest efektem wspólnej pracy wielu oddanych programistów Chromium. Umożliwia to tworzenie szybkich, płynnych, niezawodnych, responsywnych i interakcyjnych treści internetowych.
Dowiedz się, co i dlaczego tworzymy oraz jak to działa.
Cel Gwiazda Polarna
Głównym celem projektu RenderingNG jest zapewnienie, aby implementacja silnika przeglądarki oraz bogactwo interfejsów API do renderowania nie były czynnikiem ograniczającym UX w internecie.
Nie musisz się martwić, że błędy w przeglądarce spowodują niestabilność funkcji lub zepsują renderowanie witryny.
Nie powinno być żadnych tajemniczych spadków skuteczności. Nie musisz też ominąć brakujących wbudowanych funkcji.
Powinien działać.
RenderingNG to ogromny krok w kierunku realizacji tego celu. Przed RenderingNG mogliśmy (i dodaliśmy) funkcje renderowania oraz poprawiliśmy wydajność, ale trudno było nam zapewnić niezawodność tych funkcji dla deweloperów, a wydajność była nierówna. Teraz mamy architekturę, która systematycznie rozwiązuje wiele z tych problemów, a także odblokowuje zaawansowane funkcje, które wcześniej nie były możliwe do zastosowania. Oto one:
- Oferuje niezawodne funkcje podstawowe na różnych platformach, urządzeniach i systemach operacyjnych.
- ma przewidywalną i stabilną wydajność;
- Maksymalizuje wykorzystanie możliwości sprzętowych (rdzeni, GPU, rozdzielczości ekranu, częstotliwości odświeżania, interfejsów rastrowych na niskim poziomie).
- Wykonuje tylko czynności potrzebne do wyświetlenia widocznych treści.
- Wbudowana obsługa typowych wzorców projektowania wizualnego, animacji i interakcji.
- Udostępnia interfejsy API dla programistów, które ułatwiają zarządzanie kosztami renderowania.
- Udostępnia punkty rozszerzenia potoku renderowania dla wtyczek dla deweloperów.
- Optymalizuje wszystkie treści: HTML, CSS, canvas 2D, canvas 3D, obrazy, filmy i czcionki.
Porównanie z innymi silnikami renderowania przeglądarek
Gecko i WebKit również wdrożyły większość tych samych funkcji architektonicznych opisanych w tych postach na blogu, a w niektórych przypadkach nawet wcześniej niż Chromium.
Każda przeglądarka, która staje się szybsza i bardziej niezawodna, jest powodem do świętowania i ma realny wpływ. Ostatecznym celem jest ulepszenie podstawowej jakości we wszystkich przeglądarkach, aby deweloperzy mogli na niej polegać.
Piramida sukcesu
Według mojej filozofii sukces to najpierw niezawodność, potem skalowalność, a na końcu możliwość rozbudowy.
Podobnie jak w przypadku prawdziwej piramidy, każdy poziom stanowi solidną podstawę dla poziomu wyższego.
Niezawodność
Aby zapewnić użytkownikom bogate i złożone wrażenia, po pierwsze potrzebujemy niezawodnej platformy. Główne funkcje i elementy muszą działać prawidłowo oraz przez dłuższy czas. Równie ważne jest, aby te funkcje dobrze się ze sobą łączyły i nie powodowały dziwnych błędów w przypadkach szczególnych.
Z tego powodu niezawodność jest najważniejszą częścią RenderingNG. niezawodność to wynik dobrych testów, pętli sprzężenia zwrotnego dotyczących jakości, danych i schematów projektowania oprogramowania.
Aby pokazać, jak ważna jest dla mnie niezawodność, powiem, że przez większość ostatnich 8 lat poświęciliśmy się właśnie temu zagadnieniu. Najpierw zdobyliśmy dogłębną wiedzę o systemie – dowiedzieliśmy się z raportów o błędach, gdzie znajdują się słabe punkty, i je naprawiliśmy, uruchomiliśmy kompleksowe testy i poznaliśmy potrzeby dotyczące wydajności witryn oraz ograniczenia wydajności Chromium. Następnie starannie i stopniowo opracowaliśmy kluczowe wzorce projektowania oraz struktury danych. Dopiero wtedy byliśmy gotowi do dodania elementów nowej generacji do projektowania responsywnego, skalowalności i dostosowywania renderowania.
Nie oznacza to, że w tym czasie nie wprowadzono żadnych ulepszeń w Chromium. W realnym życiu jest wręcz odwrotnie. W ciągu tych lat obserwowaliśmy stały wzrost niezawodności i wydajności, ponieważ krok po kroku przeprowadzaliśmy refaktoryzację i wdrażaliśmy ulepszenia.
Testowanie i dane
W ciągu ostatnich 8 lat dodaliśmy dziesiątki tysięcy testów jednostkowych, testów skuteczności i testów integracji. Oprócz tego opracowaliśmy kompleksowe dane, które mierzą wiele aspektów działania Chromium w ramach testów lokalnych, testów porównawczych wydajności oraz w rzeczywistych warunkach w rzeczywistych witrynach z prawdziwymi użytkownikami i urządzeniami.
Jednak niezależnie od tego, jak świetny jest RenderingNG (czy inny silnik renderowania w przeglądarce), wciąż nie będzie łatwo tworzyć aplikacji internetowych, jeśli będzie w nich wiele błędów lub różnic w zachowaniu w różnych przeglądarkach. Aby temu zaradzić, maksymalizujemy też korzystanie z testów platformy internetowej. Każdy z tych testów sprawdza wzór użytkowania platformy internetowej, który wszystkie przeglądarki powinny spełniać. Uważnie obserwujemy też dane, aby zwiększać liczbę testów z upływem czasu i zwiększać zgodność z jądrem.
Testy platformy internetowej są wspólnym przedsięwzięciem. Na przykład inżynierowie z Chromium dodali tylko około 10% ogólnej liczby testów WPT dotyczących funkcji CSS. Pozostałe testy pochodzą od innych dostawców przeglądarek, niezależnych autorów i autorów specyfikacji. Wymaga to współpracy wielu osób, aby tworzyć interoperacyjną sieć.
Dobre wzorce projektowania oprogramowania
Uzyskanie wysokiej jakości oprogramowania jest znacznie łatwiejsze, jeśli kod jest łatwy do zrozumienia i zaprojektowany w sposób minimalizujący prawdopodobieństwo wystąpienia błędów. W kolejnych wpisach na blogu będziemy publikować więcej informacji o projektowaniu oprogramowania Rendering.NG.
Skalowalna wydajność
Osiągnięcie wysokiej wydajności w zakresie szybkości, pamięci i zużycia energii jest drugim najważniejszym aspektem RenderingNG. Chcemy, aby interakcje ze wszystkimi witrynami internetowymi były płynne i szybkie, a jednocześnie nie wpływały na stabilność urządzenia.
Nie chodzi nam jednak tylko o wydajność. Chcemy też zapewnić skalowalność – architekturę, która działa niezawodnie na komputerach niskiego i wysokiego poziomu oraz na różnych platformach systemowych. Nazywam to skalowaniem w górę – korzystanie z wszystkich możliwości sprzętu, oraz skalowaniem w dół – maksymalizowanie wydajności i obniżanie zapotrzebowania na system w razie potrzeby.
Aby to osiągnąć, musieliśmy maksymalnie wykorzystać buforowanie, izolację wydajności i akcelerację sprzętową GPU. Przyjrzyjmy się im po kolei. Aby to zilustrować, zastanówmy się, jak każdy z nich wpływa na skuteczność jednej bardzo ważnej interakcji na stronach internetowych: przewijania.
Pamięć podręczna
W dynamicznej, interaktywnej platformie interfejsu użytkownika, takiej jak internet, buforowanie jest najważniejszym sposobem na znaczną poprawę wydajności. Najbardziej znanym rodzajem pamięci podręcznej w przeglądarce jest pamięć podręczna HTTP, ale renderowanie również korzysta z wielu pamięci podręcznych. Najważniejsza pamięć podręczna do przewijania to buforowane tekstury GPU i listy wyświetlania, które umożliwiają bardzo szybkie przewijanie przy jednoczesnym minimalizowaniu zużycia baterii i dobrze działają na różnych urządzeniach.
Buforowanie pomaga wydłużyć czas pracy na baterii i zwiększyć liczbę klatek animacji podczas przewijania, ale jeszcze ważniejsze jest to, że umożliwia odblokowanie izolacji wydajności od głównego wątku.
Izolacja wydajności
Na nowoczesnych komputerach stacjonarnych nie musisz się martwić, że aplikacje działające w tle spowolnią aplikację, w której pracujesz. Dzieje się tak z powodu zapobiegawczego wielozadaniowości, która jest z kolei formą izolacji wydajności: zapewnia, że niezależne zadania nie spowalniają się nawzajem.
W internecie najlepszym przykładem izolacji wydajności jest przewijanie. Nawet w przypadku witryn, które mają dużo wolnego kodu JavaScript, przewijanie może być bardzo płynne, ponieważ działa on na innym wątku, który nie musi być zależny od wątku kodu JavaScript i układu. Dołożyliśmy wszelkich starań, aby zapewnić RenderingNG możliwość przewijania w wielu kierunkach, a także buforowanie, które wykracza poza wyświetlanie listy i umożliwia obsługę bardziej złożonych sytuacji. Przykłady obejmują kod reprezentujący elementy o stałym i przyklejonym położeniu, biernych słuchaczy zdarzeń oraz renderowanie tekstu o wysokiej jakości.
akceleracja GPU;
GPU znacznie przyspiesza generowanie pikseli i rysowanie na ekranie. W wielu przypadkach każdy piksel może być rysowany równolegle z każdym innym pikselem, co znacznie zwiększa szybkość. Głównym elementem RenderingNG jest rastrowanie i rysowanie na GPU wszędzie tam, gdzie to możliwe. Korzysta on z procesora graficznego na wszystkich platformach i na wszystkich urządzeniach, aby przyspieszyć renderowanie i animowanie treści internetowych. Jest to szczególnie ważne w przypadku urządzeń niskiego i bardzo wysokiego poziomu, które często mają znacznie wydajniejszą kartę graficzną niż inne części urządzenia.
Rozszerzalność: odpowiednie narzędzia do danego zadania
Gdy już zapewnimy niezawodność i wydajność skalowalne, będziemy mogli tworzyć kolejne narzędzia, które pomogą deweloperom rozszerzać wbudowane części HTML, CSS i Canvas w sposób, który nie spowoduje pogorszenia wydajności i niezawodności.
Obejmuje to wbudowane interfejsy API oraz interfejsy API dostępne w JavaScript do zaawansowanych zastosowań w ramach strony internetowej RWD, progresywnego renderowania, płynności i szybkości działania oraz renderowania w wątkach.
Te interfejsy API open web, które są wspierane przez Chromium, zostały opracowane dzięki RenderingNG i wcześniej były uważane za niewykonalne.
Wszystkie zostały opracowane z użyciem otwartych specyfikacji i we współpracy z partnerami z otwartej sieci: inżynierami z innych przeglądarek, ekspertami i deweloperami. W kolejnych postach na blogu omówimy każdy z tych tematów i wyjaśnimy, jak RenderingNG umożliwia ich realizację.
- content-visibility: pozwala witrynom na łatwe unikanie renderowania treści znajdujących się poza ekranem oraz buforowanie renderowania w przypadku widoków aplikacji na pojedynczej stronie, które nie są obecnie wyświetlane.
- OffscreenCanvas umożliwia renderowanie na płótnie (zarówno interfejs API 2D canvas, jak i WebGL) w ramach własnego wątku, co zapewnia niezawodną i wysoką wydajność. Ten projekt jest też kolejnym ważnym krokiem w rozwoju internetu. Jest to pierwszy interfejs API dla stron internetowych, który pozwala JavaScriptowi (lub WebAssembly) renderować pojedynczy dokument strony internetowej z wielu wątków.
- Zapytania dotyczące kontenera: umożliwiają pojedynczemu komponentowi dostosowanie układu do rozmiaru ekranu, otwierając tym samym drogę do stosowania komponentów typu „plug-and-play” (obecnie są one dostępne w ramach eksperymentalnej implementacji).
- Izolacja pochodzenia: umożliwia witrynom lepsze izolowanie wydajności między elementami iframe.
- Worklety do malowania na wątku innym niż główny: zapewniają deweloperom możliwość rozszerzenia sposobu malowania elementów za pomocą kodu, który działa na wątku kompozytora.
Oprócz interfejsów API do webu RenderingNG umożliwił nam wdrożenie kilku bardzo ważnych „funkcji automatycznych”, które przynoszą korzyści wszystkim witrynom:
- Izolacja witryn: iframe’y z różnych źródeł są umieszczane w różnych procesach procesora, co zapewnia większą izolację pod względem bezpieczeństwa i wydajności.
- Vulkan, D3D12 i Metal: korzystają z interfejsów API niskiego poziomu, które korzystają z kart graficznych wydajniej niż OpenGL.
- Więcej złożonych animacji: SVG, kolor tła.
Do dodatkowych funkcji, które zostaną udostępnione dzięki RenderingNG, należą:
- Animacje połączone z przewijaniem.
- Ukryty, ale dostępny dla wyszukiwarki i dostępny model DOM.
- Przejścia między elementami współdzielonymi.
- Układ niestandardowy.
- Kompilowanie poza wątkiem głównym; rozdzielenie wątków i kompilowania.
Kluczowe projekty, które składają się na RenderingNG
Oto lista najważniejszych projektów w RenderingNG.
CompositeAfterPaint
CompositeAfterPaint oddziela kompozycję od stylu, układu i malowania, co znacznie poprawia niezawodność i przewidywalność wydajności, zwiększa przepustowość oraz pozwala oszczędzać pamięć bez uszczerbku na wydajność.
| Rok | Postęp |
|---|---|
| 2015 | Wyświetlanie list wyświetlanych. |
| 2017 | Prześlij nowe anulowanie. |
| 2018 | Drzewa właściwości statku, część 1. |
| 2019 | Drzewa właściwości dostawy, część 2. |
| 2021 | Ukończono wysyłkę projektu. |
LayoutNG
Od nowa napisano wszystkie algorytmy układu, aby znacznie zwiększyć niezawodność i przewidywalność wydajności.
Dowiedz się więcej o LayoutNG.
| Rok | Postęp |
|---|---|
| 2019 | Procedura blokowania przesyłania. |
| 2020 | Ship flex, editing. |
| 2021 | Wyślij resztę. |
BlinkNG
Przeorganizowaliśmy i uporządkowaliśmy silnik renderowania Blink, dzieląc go na wyraźnie odseparowane fazy. Umożliwia to lepsze buforowanie, większą niezawodność oraz funkcje ponownego wywołania lub opóźnionego renderowania, takie jak zapytania dotyczące widoczności treści i kontenerów.
Przyspieszanie za pomocą karty graficznej wszędzie
Przyspieszenie przez GPU zapewnia ogromne przyspieszenie w przypadku większości treści, ponieważ każdy piksel może być przetwarzany równolegle. Jest to też skuteczna metoda na poprawę wydajności na urządzeniach niskiej klasy, które zwykle mają procesor graficzny.
| Rok | Postęp |
|---|---|
| 2014 | Obsługa Canvas. Dostępna na urządzeniach z Androidem w przypadku treści wymagających zgody użytkownika. |
| 2016 | Wysyłaj na Macu. |
| 2017 | GPU jest używany w przypadku ponad 60% wyświetleń stron na urządzeniach z Androidem. |
| 2018 | Dostępna na Windows, ChromeOS i Android Go. |
| 2019 | Rasteryzacja GPU w wątkach. |
| 2020 | Prześlij pozostałe treści z Androida. |
Przewijanie w wątku, animacje i dekodowanie
długoterminowe działania mające na celu przeniesienie wszystkich animacji, które nie wpływają na układ, oraz dekodowania obrazów z głównego wątku; Jest on w trakcie.
| Rok | Postęp |
|---|---|
| 2011 | Wstępna obsługa przewijania i animacji w wątkach. |
| 2015 | Kompresowanie warstwy. |
| 2016 | Uniwersalne przewijanie. |
| 2017 | Dekodowanie obrazu w wątku kompozytora. |
| 2018 | Animacje obrazów na wątku kompozytora. |
| 2020 | Zawsze kompozyt stałego położenia. |
| 2021 | animacje transformacji procentowej, animacje SVG. |
Viz
Centralizowany proces rastrowania i rysowania w Chromium, który zwiększa przepustowość, optymalizuje pamięć i umożliwia optymalne wykorzystanie możliwości sprzętowych. Ma ona też inne zalety, mniej widoczne dla deweloperów, ale bardzo widoczne dla użytkowników, takie jak odblokowanie funkcji izolacji witryn i oddzielenie ścieżki renderowania od renderowania interfejsu przeglądarki.
| Rok | Postęp |
|---|---|
| 2018 | OOP-R na Androidzie, Macu i Windowsie. |
| 2019 | OOP-D wysłano. OOP-R wysyłane wszędzie (z wyjątkiem Canvas). SkiaRenderer dostarczony w Linuksie. |
| 2020 | SkiaRenderer został udostępniony w systemach Windows i Android. Vulkan na Androidzie. |
| 2021 | SkiaRenderer dostępny na Macu (wkrótce także na ChromeOS). |
Definicje terminów na wykresie powyżej:
- OOP-D
- Wyświetlacz kompozytorski poza procesem. Kompilowanie wyświetlania to ta sama czynność co kompilowanie systemu operacyjnego. Out of process oznacza, że proces jest wykonywany w procesie Viz, a nie w procesie renderowania strony internetowej ani w procesie interfejsu użytkownika przeglądarki.
- OOP-R
- Raster poza procesem. Raster konwertuje listy wyświetlania na piksele. Out of process oznacza, że operacja jest wykonywana w procesie Viz, a nie w procesie renderowania strony internetowej.
- SkiaRenderer
- Nowa implementacja kompozytora wyświetlacza, która może obsługiwać wykonywanie na różnych interfejsach API kart graficznych, takich jak Vulkan, D3D12 czy Metal.
Renderowanie wątków i przyspieszone renderowanie na płótnie
To właśnie ten projekt umożliwił utworzenie OffscreenCanvas.
| Rok | Postęp |
|---|---|
| 2018 | Prześlij OffscreenCanvas. |
| 2019 | Prześlij ImageBitmapRenderingContext. |
| 2021 | Wyślij OOP-R. |
VideoNG
VideoNG to długoterminowy projekt mający na celu zapewnienie wydajnego, niezawodnego i wysokiej jakości odtwarzania filmów w internecie.
| Rok | Postęp |
|---|---|
| 2014 | Wprowadziliśmy system renderowania oparty na Mojo. |
| 2015 | Dodano Projekt Butter i nakładki wideo, aby wygładzić renderowanie filmów. |
| 2016 | Ujednolicony system dekodowania i renderowania na Androidzie i komputerach. |
| 2017 | Renderowanie filmów HDR i z poprawką kolorów. |
| 2018 | Dostarczony strumień dekodowania wideo oparty na Mojo. |
| 2019 | Dostarczony strumień przetwarzania filmów na urządzeniach Surface. |
| 2021 | Dodano obsługę renderowania chronionych treści w 4K w ChromeOS. |
Definicje terminów na wykresie powyżej:
- Mojo
- Należący do Chromium interfejs IPC nowej generacji.
- Platforma
- Koncepcja, która jest częścią projektu wizualizacji.
Ilustracje: Una Kravets.