RenderingNG

Yeni nesil web içeriğine hazır olun

Chris Harrelson
Chris Harrelson

RenderingNG, önceki sürümlere kıyasla çok daha iyi performans gösteren yeni nesil bir oluşturma mimarisidir. RenderingNG, sekiz yıldan uzun bir süre boyunca geliştirildi ve birçok Chromium geliştiricisinin ortak çalışmalarını temsil ediyor. Hızlı, akıcı, güvenilir, duyarlı ve etkileşimli web içeriği için çok büyük bir potansiyel sunar.

RenderingNG'nin farklı öğelerinin taslağı
RenderingNG

Burada, neyi neden geliştirdiğimizi ve nasıl çalıştığını öğreneceksiniz.

Kuzey yıldızı hedefi

RenderingNG'yi motive eden ana hedef, tarayıcı motoru uygulamasının ve oluşturma API'lerinin zenginliğinin web'deki kullanıcı deneyimini sınırlayan bir faktör olmamasıdır.

Tarayıcının hataları nedeniyle özelliklerin güvenilirliğini kaybetmesi veya sitenizin oluşturulmasının bozulması gibi sorunlarla karşılaşmazsınız.

Performans açısından belirgin bir düşüş olmamalıdır. Ayrıca, eksik yerleşik özellikleri aşmanız gerekmez.

Bu işlem sorunsuz şekilde gerçekleşir.

RenderingNG, bu ana hedefe doğru atılan dev bir adımdır. RenderingNG'den önce, oluşturma özellikleri ekleyip performansı iyileştirebiliyorduk (ve bunu yapıyorduk), ancak bu özellikleri geliştiriciler için güvenilir hale getirmekte zorlanıyorduk ve performansta birçok düşüş yaşanıyordu. Artık bu sorunların çoğunu sistematik olarak ortadan kaldıran ve daha önce uygulanabilir olarak değerlendirilmeyen gelişmiş özelliklerin önünü açan bir mimariye sahibiz. Otomatik etiketleme:

  • Farklı platform, cihaz ve işletim sistemi kombinasyonlarında sağlam temel özelliklere sahiptir.
  • Öngörülebilir ve güvenilir performansa sahiptir.
  • Donanım özelliklerinin (çekirdekler, GPU, ekran çözünürlüğü, yenileme hızları, düşük düzey raster API'leri) kullanımını en üst düzeye çıkarır.
  • Yalnızca görünür içeriği görüntülemek için gereken işlemleri gerçekleştirir.
  • Ortak görsel tasarım, animasyon ve etkileşim tasarımı kalıpları için yerleşik destek sunar.
  • Oluşturma maliyetlerini kolayca yönetmek için geliştirici API'leri sağlar.
  • Geliştirici eklentileri için oluşturma ardışık düzeni uzantı noktaları sağlar.
  • HTML, CSS, 2D tuval, 3D tuval, resimler, videolar ve yazı tipleri gibi tüm içerikleri optimize eder.

Diğer tarayıcı oluşturma motorlarıyla karşılaştırma

Gecko ve Webkit de bu blog yayınlarında açıklanan mimari özelliklerin çoğunu uyguladı ve bazı durumlarda bunları Chromium'dan önce ekledi.

Daha hızlı ve daha güvenilir hale gelen tarayıcılar, kutlama nedenidir ve gerçek bir etki yaratır. Nihai hedef, geliştiricilerin güvenebilmesi için tüm tarayıcılar için temel çizgiyi ilerletmektir.

Başarı piramidi

Başarının, önce güvenilirliğe, ardından ölçeklenebilir performansa ve son olarak da genişletilebilirliğe ulaşılmasının bir sonucu olduğunu düşünüyorum.

Tabanı güvenilirlik, ortası performans ve tepesinde genişletilebilirlik etiketleriyle piramit

Gerçek hayatta olduğu gibi, her seviye üstteki seviye için mutlaka sağlam bir temel sağlar.

Güvenilirlik

RenderingNG ile kullanıcıların canını sıkmadan nasıl özellik eklenebileceğini gösteren taslak

Zengin ve karmaşık kullanıcı deneyimleri sunabilmek için öncelikle sağlam bir platforma ihtiyacımız var. Temel özellikler ve temel bilgiler düzgün çalışmalı ve zaman içinde çalışmaya devam etmelidir. Bu özelliklerin iyi bir şekilde derlenmesi ve garip uç durumlara yol açmaması ya da hata içermemesi de aynı derecede önemlidir.

Sketch, özellik ekleme, geri bildirim alma ve güvenilirliği artırmanın döngüsel yapısını gösterir

Bu nedenle, güvenilirlik RenderingNG'nin en önemli parçasıdır. Güvenilirlik ise iyi testlerin, kaliteli geri bildirim döngülerinin, metriklerin ve yazılım tasarım kalıplarının sonucudur.

Güvenilirliğin ne kadar önemli olduğunu anlamak için son sekiz yılın büyük bir kısmını yalnızca bu konuya odaklanarak geçirdik. Öncelikle sistem hakkında derin bir bilgi birikimi oluşturduk. Bunun için zayıf noktaların bulunduğu hata raporlarından ders alıp bunları düzelttik, kapsamlı testler başlattık ve sitelerin performans ihtiyaçlarını ve Chromium'un performans sınırlamalarını anladık. Ardından, temel tasarım kalıplarını ve veri yapılarını dikkatli ve aşamalı bir şekilde tasarlayıp kullanıma sunduk. Ancak bu aşamadan sonra, duyarlı tasarım, ölçeklenebilirlik ve oluşturma özelleştirmesi için gerçekten yeni nesil primitifler eklemeye hazırdık.

Zaman içinde güvenilirlik, performans ve genişletilebilirliğin arttığını gösteren çizim grafiği

Bu, Chromium'da bu süre zarfında hiçbir iyileştirme yapılmadığı anlamına gelmez. Aslında bunun tam tersi geçerlidir. Bu yıllarda, her iyileştirmeyi adım adım yeniden yapılandırıp kullanıma sunduğumuz için güvenilirlik ve performansta istikrarlı ve sürekli bir artış gördük.

Test ve metrikler

Son 8 yılda on binlerce birim, performans ve entegrasyon testi ekledik. Ayrıca, Chromium'un yerel testlerde, performans karşılaştırmalarında ve gerçek kullanıcılar ile cihazlar tarafından gerçek sitelerde nasıl davrandığının birçok yönünü ölçen kapsamlı metrikler geliştirdik.

Ancak RenderingNG (veya başka bir tarayıcının oluşturma motoru) ne kadar iyi olursa olsun, tarayıcılar arasında çok fazla hata veya davranış farkı varsa web için geliştirme yapmak kolay olmayacaktır. Bu sorunu gidermek için Web Platformu Testleri'nin kullanımını da en üst düzeye çıkarıyoruz. Bu testlerin her biri, web platformunun tüm tarayıcıların geçmeyi hedeflemesi gereken bir kullanım şeklini doğrular. Ayrıca zaman içinde daha fazla testten geçme ve temel uyumluluğu artırma ile ilgili metrikleri yakından izliyoruz.

Web Platform Testleri ortak bir çalışmadır. Örneğin, Chromium mühendisleri CSS özellikleri için toplam WPT testlerinin yalnızca yaklaşık% 10'unu eklemiştir. Diğer tarayıcı tedarikçileri, bağımsız katkıda bulunanlar ve spesifikasyon yazarları geri kalanı sağlar. Birlikte çalışabilir web'i geliştirmek için bir köyün çalışması gerekir.

Farklı motorlarda geçen testler
wpt.fyi/compat2021 adresinden, temel özellikler için WPT'lerin geçme oranını ölçme

İyi yazılım tasarım kalıpları

Kod kolay anlaşılır ve hata olasılığını en aza indirecek şekilde tasarlanmışsa kaliteli yazılımları güvenilir bir şekilde sunmak da çok daha kolaydır. RenderingNG'nin yazılım tasarımı hakkında daha fazla bilgiyi sonraki blog yayınlarımızda paylaşacağız.

Ölçeklenebilir performans

Hız, bellek ve güç kullanımı boyutlarında mükemmel performans elde etmek, RenderingNG'nin en önemli ikinci özelliğidir. Tüm web siteleriyle etkileşimin sorunsuz ve duyarlı olmasını ancak cihazın kararlılığından ödün verilmemesini istiyoruz.

Ancak sadece performans değil, ölçeklenebilir performans istiyoruz. Yani hem düşük hem de yüksek kaliteli makinelerde ve işletim sistemi platformlarında güvenilir bir şekilde iyi performans gösteren bir mimari. Buna ölçek büyütme (donanım cihazının yapabileceği her şeyden yararlanma) ve ölçek küçültme (verimliliği en üst düzeye çıkarma ve gerektiğinde sistemdeki talebi azaltma) diyorum.

Bu hedefe ulaşmak için önbelleğe alma, performans izolasyonu ve GPU donanım hızlandırmasından maksimum düzeyde yararlanmamız gerekiyordu. Bunları sırayla inceleyelim. Bunu somutlaştırmak için her birinin web sayfalarındaki son derece önemli bir etkileşimin performansına nasıl katkıda bulunduğunu düşünelim: kaydırma.

Önbelleğe alma

Web gibi dinamik ve etkileşimli bir kullanıcı arayüzü platformunda performansı önemli ölçüde artırmanın en önemli yolu önbelleğe almadır. Tarayıcıda en çok bilinen önbelleğe alma türü HTTP önbelleğidir ancak oluşturma işleminde de birçok önbellek vardır. Kaydırma için en önemli önbellek, önbelleğe alınmış GPU dokuları ve görüntü listeleridir. Bu önbellekler, kaydırma işleminin son derece hızlı olmasını sağlarken pil tüketimini en aza indirir ve çeşitli cihazlarda iyi çalışır.

Önbelleğe alma, kaydırma için pil ömrünü ve animasyon kare hızını artırır ancak daha da önemlisi, performans izolasyonunun ana iş parçacığında engellemesini kaldırır.

Performans izolasyonu

Modern masaüstü bilgisayarlarda, arka plan uygulamalarının kullandığınız uygulamayı yavaşlatmasından endişelenmenize gerek yoktur. Bunun nedeni, önleyici çoklu görev özelliğidir. Bu özellik de performans izolasyonu biçimidir: Bağımsız görevlerin birbirini yavaşlatmasını önler.

Web'de performans izolasyonuna en iyi örnek kaydırma işlemidir. Çok sayıda yavaş JavaScript içeren web sitelerinde bile, JavaScript ve düzen iş parçacığına bağlı olması gerekmeyen farklı bir iş parçacığında çalıştığından kaydırma işlemi çok sorunsuz olabilir. Olası her kaydırma işleminin işlendiğinden emin olmak için RenderingNG'de çok çalıştık. Bunun için, yalnızca bir görüntüleme listesinin ötesine geçerek daha karmaşık durumlara yönelik önbelleğe alma yöntemleri kullandık. Sabit ve yapışkan konumlandırılmış öğeleri, pasif etkinlik dinleyicileri ve yüksek kaliteli metin oluşturmayı temsil eden kodlar buna örnek gösterilebilir.

Sketch, RenderingNG ile JavaScript çok yavaş olsa bile performansın iyi kaldığını gösteriyor.

GPU hızlandırma

GPU, piksel oluşturmayı ve ekrana çizmeyi önemli ölçüde hızlandırır. Birçok durumda her piksel diğer tüm piksellerle paralel olarak çizilebilir. Bu da büyük bir hız artışı sağlar. RenderingNG'nin önemli bir bileşeni, GPU raster ve her yerde çizimdir. Bu özellik, web içeriğinin oluşturulmasını ve animasyonlarını çok daha hızlı hale getirmek için tüm platformlardaki ve cihazlardaki GPU'yu kullanır. Bu, özellikle düşük kaliteli cihazlarda veya genellikle cihazın diğer bölümlerinden çok daha güçlü bir GPU'ya sahip olan çok yüksek kaliteli cihazlarda önemlidir.

Sketch, RenderingNG ile performansın çok fazla düşmediğini gösteriyor.

Genişletilebilirlik: İş için doğru araçlar

Güvenilirlik ve ölçeklenebilir performansı sağladıktan sonra, geliştiricilerin HTML, CSS ve Canvas'ın yerleşik bölümlerini genişletmesine yardımcı olacak ve bu zor kazanılan performans ve güvenilirlikten ödün vermeyecek şekilde bir dizi araç üzerinde çalışmaya hazırız.

Buna, duyarlı tasarım, aşamalı oluşturma, akıcılık ve duyarlılığın yanı sıra iş parçacıklı oluşturma gibi gelişmiş kullanım alanları için yerleşik ve JavaScript'e açık API'ler dahildir.

Chromium tarafından desteklenen ve daha önce uygulanamaz olarak kabul edilen aşağıdaki açık web API'leri, RenderingNG sayesinde kullanıma sunuldu.

Bunların tümü, açık web iş ortaklarıyla (diğer tarayıcılardaki mühendisler, uzmanlar ve web geliştiricileri) işbirliği içinde ve açık spesifikasyonlarla geliştirilmiştir. Sonraki blog yayınlarında bu özelliklerin her birini ayrıntılı olarak inceleyip RenderingNG'nin bunları nasıl mümkün kıldığını açıklayacağız.

  • content-visibility: Sitelerin ekran dışındaki içerikler için oluşturma işlemini kolayca atlamasına ve şu anda gösterilmeyen tek sayfalık uygulama görünümleri için oluşturma işlemini önbelleğe almasına olanak tanır.
  • OffscreenCanvas: Tuval oluşturmanın (hem 2D tuval API'si hem de WebGL) güvenilir bir şekilde mükemmel performans göstermesi için kendi iş parçacığında çalışmasını sağlar. Bu proje, web için önemli bir dönüm noktasıdır. JavaScript'in (veya WebAssembly'nin) tek bir web sayfası belgesini birden fazla iş parçacığında oluşturmasına olanak tanıyan ilk web API'sidir.
  • Container sorguları: Tek bir bileşenin duyarlı bir şekilde kendini düzenlemesine olanak tanır. Böylece, tak ve çalıştır bileşenlerinin tüm dünyasının engelleri kaldırılır (şu anda deneysel bir uygulamadır).
  • Kaynak izolasyonu: Sitelerin iframe'ler arasında daha fazla performans izolasyonu etkinleştirmesine olanak tanır.
  • Ana iş parçacığı dışındaki boyama iş parçacıkları: Geliştiricilere, öğelerin nasıl boyandığını, birleştirici iş parçacığında çalışan kodla genişletmenin bir yolunu sunar.

RenderingNG, açık web API'lerine ek olarak tüm sitelere fayda sağlayan çok önemli birkaç "otomatik özellik" sunmamıza olanak tanıdı:

  • Site İzolasyonu: Daha iyi güvenlik ve performans izolasyonu için kaynakta farklı iframe'leri farklı CPU işlemlerine yerleştirir.
  • Vulkan, D3D12 ve Metal: GPU'ları OpenGL'den daha verimli kullanan alt düzey API'lerden yararlanır.
  • Daha fazla birleştirilmiş animasyon: SVG, arka plan rengi.

RenderingNG ile kullanıma sunulacak ve heyecan verici bulduğumuz diğer özellikler şunlardır:

RenderingNG'yi oluşturan önemli projeler

RenderingNG'deki önemli projelerin listesi aşağıda verilmiştir.

CompositeAfterPaint

CompositeAfterPaint, birleştirmeyi stil, düzen ve boya ile ilişkili olmayan bir işlem haline getirerek çok daha iyi güvenilirlik ve tahmin edilebilir performans, daha yüksek veri akışı ve performanstan ödün vermeden daha az bellek kullanımı sağlar.

Yıl İlerleme
2015 Gemi listeleri.
2017 Yeni geçersiz kılma işlemi gönderin.
2018 Gemi mülkü ağaçları 1. bölüm.
2019 Gemi mülkü ağaçları 2. bölüm.
2021 Projenin gönderimi tamamlandı.

LayoutNG

Güvenilirliği büyük ölçüde artırmak ve daha tahmin edilebilir bir performans sağlamak için tüm düzen algoritmalarının sıfırdan yeniden yazılması.

LayoutNG hakkında daha fazla bilgi edinin.

Yıl İlerleme
2019 Gemi blok akışı.
2020 Ship flex, editing.
2021 Diğer her şeyi gönderin.

BlinkNG

Blink oluşturma motorunu, birbirinden net bir şekilde ayrılmış ardışık düzen aşamalarına ayırarak yeniden yapılandırdık ve temizledik. Bu sayede daha iyi önbelleğe alma, daha yüksek güvenilirlik ve içerik görünürlüğü ile kapsayıcı sorguları gibi yeniden giriş veya gecikmeli oluşturma özellikleri elde edebilirsiniz.

Her yerde GPU hızlandırma

GPU hızlandırması, her piksel paralel olarak işlenebilir olduğundan çoğu içerik için büyük bir hızlanma sağlar. Bu yöntem, genellikle GPU'ya sahip olan düşük segment cihazlarda performansı artırmak için de etkilidir.

Yıl İlerleme
2014 Tuval desteği. Android'de etkinleştirme seçeneği sunan içeriklerde gönderilir.
2016 Mac'te gönderin.
2017 GPU, Android sayfa görüntülemelerinin% 60'ından fazlasında kullanılır.
2018 Windows, ChromeOS ve Android Go'da kullanıma sunulur.
2019 İlgili GPU'da iş parçacıklı rasterleştirme.
2020 Kalan Android içeriklerini gönderin.

İleti dizileri halinde kaydırma, animasyonlar ve kod çözme

Tüm kaydırma, düzene neden olmayan animasyonlar ve resim kod çözme işlemlerini ana iş parçacığından kaldırmak için uzun vadeli bir çalışma. Devam ediyor.

Yıl İlerleme
2011 İlgili mesajları içeren mesaj dizileri ve animasyon için ilk destek.
2015 Katman sıkıştırma.
2016 Evrensel taşma kaydırma.
2017 Görüntü, oluşturucu iş parçacığında kod çözülür.
2018 Oluşturucu mesaj dizisinde resim animasyonlar.
2020 Her zaman sabit konumlu olarak birleştirin.
2021 Yüzde dönüşüm animasyonları, SVG animasyonları.

Viz

Chromium için merkezi bir raster ve çizim işlemi. Bu işlem, verimi artırır, belleği optimize eder ve donanım özelliklerinin optimum şekilde kullanılmasını sağlar. Web geliştiricileri tarafından daha az fark edilen ancak kullanıcılar tarafından çok fark edilen başka avantajları da vardır. Örneğin, Site İzolasyonu'nun engellemesini kaldırma ve oluşturma ardışık düzenini tarayıcı kullanıcı arayüzü oluşturma işleminden ayırma.

Yıl İlerleme
2018 OOP-R, Android, Mac ve Windows'te kullanıma sunuldu.
2019 OOP-D gönderildi. OOP-R her yere gönderilir (Kanvas hariç). SkiaRenderer, Linux'ta kullanıma sunuldu.
2020 SkiaRenderer, Windows ve Android'de kullanıma sunuldu. Vulkan, Android'de kullanıma sunuldu.
2021 SkiaRenderer, Mac'te (ve yakında ChromeOS'te) kullanıma sunuldu.

Yukarıdaki grafikte yer alan terimlerin tanımları:

OOP-D
İşlem dışı görüntü kompozitörü. Görüntü birleştirme, işletim sistemi derleyicisi ile aynı türde bir etkinliktir. İşlem dışında, web sayfasının oluşturma işlemi veya tarayıcı kullanıcı arayüzü işlemi yerine Viz işleminde yapma anlamına gelir.
OOP-R
İşlem dışı raster. Raster, görüntüleme listelerini piksele dönüştürür. İşlem dışı, web sayfasının oluşturma işlemi yerine Viz işleminde yapılması anlamına gelir.
SkiaRenderer
Vulkan, D3D12 veya Metal gibi çeşitli farklı temel GPU API'lerinde yürütmeyi destekleyebilecek yeni bir görüntü oluşturucu uygulaması.

İleti dizileri ve hızlandırılmış kanvas oluşturma

Bu, OffscreenCanvas'ı mümkün kılan projedir.

Yıl İlerleme
2018 OffscreenCanvas'ı gönderin.
2019 ImageBitmapRenderingContext'i gönderin.
2021 OOP-R'yi gönderin.

VideoNG

VideoNG, web'de verimli, güvenilir ve yüksek kaliteli video oynatma sağlamak için uzun vadeli bir çalışmadır.

Yıl İlerleme
2014 Mojo tabanlı bir oluşturma çerçevesi kullanıma sunuldu.
2015 Daha sorunsuz video oluşturma için Project Butter ve video yer paylaşımları kullanıma sunuldu.
2016 Birleştirilmiş Android ve masaüstü kod çözme ve oluşturma ardışık düzenleri kullanıma sunuldu.
2017 HDR ve renk düzeltmeli video oluşturma özelliği kullanıma sunuldu.
2018 Mojo tabanlı video kod çözme ardışık düzeni kullanıma sunuldu.
2019 Gönderilen Surface tabanlı video oluşturma ardışık düzeni.
2021 ChromeOS'te 4K korumalı içerik oluşturma desteği kullanıma sunuldu.

Yukarıdaki grafikte yer alan terimlerin tanımları:

Mojo
Chromium için yeni nesil bir IPC alt sistemi.
Platform
Viz proje tasarımının bir parçası olan bir kavram.

İllüstrasyonlar: Una Kravets.