Yeni nesil web içeriği için hazır
Ben Chris Harrelson. Blink'te Görüntü Oluşturma (HTML ve CSS'yi piksele dönüştürme) mühendislik lideriyim. Sekiz yılı aşkın süredir web'de mükemmel kullanıcı deneyimini daha hızlı, kolay ve güvenilir hale getirmek için elimden geleni yapmak olarak elimden geleni yaptım. Yeni ve son teknoloji bir Chromium oluşturma motoru mimarisi oluşturmak için bu süre zarfında neler yaptığımızı size anlatmaktan heyecan duyuyorum. Bunu başarmak için çok çalıştık. Umarım bunu duyuyorsunuz.
2021'de bu mimariyi tasarlama, oluşturma ve gönderme sürecini büyük oranda tamamlayacağız. Eskisine göre çok daha iyi performans gösteren yeni nesil bir oluşturma mimarisi olduğu için buna RenderingNG adını verelim. En az sekiz yıldır devam eden RenderingNG birçok özel Chromium geliştiricisinin çalışmalarını temsil etmektedir. Yeni nesil hızlı, akıcı, güvenilir, duyarlı ve etkileşimli web içeriği için büyük bir potansiyel ortaya çıkarır. Aynı zamanda, geliştiricilerin güvenebileceği tüm web oluşturma motorları için yeni bir minimum standardı tanımladığını düşünüyorum.
Bu blog yayını, serinin ilk gönderisidir. Burada, neler oluşturduğumuzu, neden geliştirdiğimizi ve nasıl çalıştığını açıklayacağız. Bu ilk gönderide, şunlarla başlayacağım:
- Kuzey yıldızı hedefimiz.
- Başarı piramidi: Çalışmalarımıza yön veren ilkeler ve bu ilkelerin uygulamalı örnekleri.
- RenderingNG'in mümkün hale getirdiği özellikler ve olanaklar.
- RenderingNG'nin ana proje bileşenlerine genel bakış.
Kuzey yıldızı
RenderingNG'i motive eden kuzey yıldızı hedef, tarayıcı motoru uygulamasının ve görüntüleme API'lerinin zenginliğinin web'de kullanıcı deneyimini sınırlayan bir faktör olmamasıdır.
Özellikleri güvenilmez hale getiren veya sitenizin görünümünü bozan tarayıcı hataları konusunda endişelenmenize gerek yoktur.
Performans açısından gizemli uçurumlar olmamalıdır. Ayrıca, eksik olan yerleşik özelliklerle ilgili işlem yapmanıza gerek kalmaz.
Hemen işe yarayacaktır.
RenderingNG'in bu kuzey yıldızı hedefine doğru büyük bir adım olduğuna inanıyorum. RenderingNG'den önce oluşturma özellikleri ekleyip performansı iyileştirebildik (ve bunu yapıyorduk da). Ancak bu özellikleri geliştiriciler için güvenilir hale getirmekte çabalıyorduk ve performansla ilgili birçok uçurum vardı. Şimdi, bu sorunların birçoğunu sistematik olarak ortadan kaldıran ve daha önce uygulanabilir olmadığı ileri seviye özelliklerin önündeki engelleri kaldıran bir mimariye sahibiz. Otomatik etiketleme:
- Farklı platform, cihaz ve işletim sistemi kombinasyonlarında son derece sağlam temel özelliklere sahiptir.
- Tahmin edilebilir ve güvenilir bir performansa sahiptir.
- Donanım özelliklerinin (çekirdekler, GPU, ekran çözünürlüğü, yenileme hızları, düşük seviyeli kafes 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şleri gerçekleştirir.
- Yaygın görsel tasarım, animasyon ve etkileşim tasarımı kalıpları için yerleşik desteğe sahiptir.
- Oluşturma maliyetlerinin kolayca yönetilmesi 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, video ve yazı tipleri olmak üzere tüm içeriği optimize eder.
Diğer tarayıcı oluşturma motorlarıyla karşılaştırma
Gecko ve Webkit, bu blog yayınlarında açıklanan mimari özelliklerin çoğunu uyguladı ve hatta bazı durumlarda bunları Chromium'dan önce ekledi. Muhteşem bir imkân. Daha hızlı ve daha güvenilir hale gelen bir tarayıcı kutlama yapsa da ve gerçek bir etki yaratsa da nihai hedef, tüm tarayıcılar için temeli ileriye taşımak ve böylece geliştiricilerin güvenebilmesidir.
Başarı piramidi
Felsefeme göre, başarı önce güvenilirlik elde etmek, ardından ölçeklenebilir performans ve son olarak da genişletilebilirlik elde etmektir.
Gerçek hayattaki piramitlerde olduğu gibi, her seviye, yukarıdaki seviye için mutlaka sağlam bir temel sağlar.
Güvenilirlik
Zengin ve karmaşık kullanıcı deneyimlerinin mümkün olması için gereken ilk şey sağlam bir platformdur. Temel özellikler ve temel özellikler doğru şekilde çalışmalı ve zaman içinde çalışmaya devam etmelidir. Bu özelliklerin iyi yazması ve garip uç durumlara sahip çalışma biçimleri veya hatalar içermemesi de en az bu kadar önemlidir.
Bu nedenle, güvenilirlik RenderingNG'nin en önemli tek parçasıdır. Güvenilirlik ise iyi testlerin, kaliteli geri bildirim döngülerinin, metriklerin ve yazılım tasarım modellerinin sonucudur.
Güvenilirliğin ne kadar önemli olduğunun anlaşılması için, son sekiz yılın büyük bir kısmını yalnızca bu kısım için ele aldık. İlk olarak sistem hakkında derin bir bilgiye sahip olduk. Zayıf noktaların bulunduğu hata raporlarından bilgi edinip bunları düzelttik, kapsamlı testleri güçlendirdik ve sitelerin performans ihtiyaçlarını ve Chromium'un performansındaki sınırlamaları anladık. Ardından, önemli tasarım modellerini ve veri yapılarını dikkatlice ve kademeli olarak tasarladık ve kullanıma sunduk. Ancak o zaman duyarlı tasarım, ölçeklenebilirlik ve görüntülemenin özelleştirilmesi için tam anlamıyla yeni nesil temel öğeler eklemeye hazırmıştık.
Bu, o süre içinde Chromium'da hiçbir şeyin iyileştirilmediği anlamına gelmez. Hatta bunun tam tersi. Her iyileştirmeyi yeniden düzenleyerek ve adım adım kullanıma sunduğumuzdan bu yıllarda güvenilirlik ve performansta istikrarlı ve sürekli bir artış görüldü.
Testler ve metrikler
Geçtiğimiz 8 yılda on binlerce birim, performans ve entegrasyon testi ekledik. Buna ek olarak, Chromium'un oluşturmanın yerel testlerde, performans karşılaştırmalarında ve gerçek sitelerde, gerçek kullanıcılar ve cihazlarda gösterdiği davranışı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ış farklılıkları varsa yine de web için geliştirilmesi kolay olmayacaktır. Bu sorunu gidermek için Web Platformu Testlerinin kullanımını da en üst düzeye çıkarıyoruz. Bu testlerin her biri, tüm tarayıcıların geçirmeyi amaçladığı bir web platformu kullanım kalıbını doğrular. Ayrıca, zaman içinde daha fazla test başarılı olmak ve temel uyumluluğu artırmak için metrikleri yakından izliyoruz.
Web Platformu Testleri ortak bir çalışmadır. Örneğin, Chromium mühendisleri CSS'nin özelliklerine ilişkin toplam WPT testlerinin yalnızca% 10'unu eklemiştir. Geri kalanını diğer tarayıcı tedarikçileri, bağımsız katkıda bulunanlar ve spesifikasyon yazarları katkıda bulunur. Birlikte çalışabilir web'i güçlendirmek için çok çaba sarf etmek gerekiyor!
İyi yazılım tasarımı modelleri
Öte yandan, kodun kolay anlaşılması ve hata olasılığını en aza indirecek şekilde tasarlanması halinde kaliteli yazılımları güvenilir bir şekilde teslim etmek çok daha kolay olur. Sonraki blog gönderilerinde RenderingNG'nin yazılım tasarımı hakkında söyleyeceğimiz daha birçok şey olacak.
Ölçeklenebilir performans
Hız, bellek ve güç kullanımı boyutlarında mükemmel performans elde etmek, RenderingNG'in bir sonraki en önemli yönüdür. Cihazın kararlılığından ödün vermemekle birlikte, tüm web siteleriyle etkileşimlerin sorunsuz ve duyarlı olmasını istiyoruz.
Ancak yalnızca performans değil, ölçeklenebilir performans da istiyoruz. Düşük kaliteli ve ileri teknoloji makinelerin yanı sıra işletim sistemi platformlarında güvenilir biçimde iyi performans gösteren bir mimari de bu mimariden faydalanıyor. Ben buna ölçekleme diyorum. Donanım cihazının yapabilecekleri her şeyden faydalanıyor ve ölçeği azaltarak verimliliği en üst düzeye çıkarıyor, gerektiğinde sisteme gösterilen talebi azaltıyor.
Bunun için önbelleğe alma, performans izolasyonu ve GPU donanım hızlandırmadan maksimum düzeyde yararlanmamız gerekiyordu. Şimdi sırasıyla her birini inceleyelim. Konuyu daha somut hale getirmek için, her birinin web sayfalarında son derece önemli bir etkileşimin, yani kaydırmanın performansına nasıl katkıda bulunduğunu düşünelim.
Önbelleğe alma
Web gibi dinamik ve etkileşimli bir kullanıcı arayüzü platformunda, önbelleğe alma, performansı büyük ölçüde iyileştirmenin en önemli yoludur. Tarayıcıda önbelleğe almanın en iyi bilinen türü HTTP önbelleğidir, ancak oluşturma işleminde de pek çok önbellek bulunur. Kaydırma için en önemli önbellek, önbelleğe alınan GPU dokuları ve görüntüleme listeleridir. Bunlar, pil tüketimini en aza indirirken ve çeşitli cihazlarda iyi bir şekilde çalışırken kaydırmanın son derece hızlı olmasını sağlar.
Önbelleğe alma, kaydırma için pil ömrüne ve animasyon kare hızına yardımcı olur. Ancak daha da önemlisi, ana iş parçacığından performans yalıtımının engellenmesidir.
Performans yalıtımı
Modern masaüstü bilgisayarlarda, arka plan uygulamalarının çalışmakta olduğunuz uygulamayı yavaşlatması konusunda hiçbir zaman endişelenmenize gerek yoktur. Bunun nedeni, bir tür performans yalıtımı olan önleme amaçlı çoklu görevdir. Böylece bağımsız görevler birbirini yavaşlatmaz.
Web'de, performans yalıtımının en iyi örneği kaydırmadır. Çok sayıda yavaş JavaScript'e sahip web sitelerinde bile kaydırma çok akıcı olabilir. Bunun nedeni, JavaScript'e ve düzen iş parçacığına bağlı olması gerekmeyen farklı bir iş parçacığında çalıştırılmasıdır. Olası her kaydırmanın iş parçacıklı olduğundan emin olmak için, bir görüntüleme listesinden çok daha karmaşık durumlara kadar geniş bir alana yayılan önbelleğe alma yoluyla RenderingNG için çok çaba sarf ettik. Örnekler arasında sabit ve yapışkan konumlu öğeleri temsil eden kod, pasif etkinlik işleyiciler ve yüksek kaliteli metin oluşturma yer alır.
GPU hızlandırması
GPU, piksellerin oluşturulmasını ve ekranda çizim yapılmasını önemli ölçüde hızlandırır. Çoğu durumda, her piksel diğer tüm piksellere paralel olarak çizilebilir. Bu da çok büyük bir hız artışıyla sonuçlanır. RenderingNG'nin temel bileşenlerinden biri GPU kafes ve çizim yöntemidir. Bu, web içeriğinin oluşturulmasını ve animasyonunu son derece hızlandırmak için tüm platformlarda ve tüm cihazlarda GPU'yu kullanır. Bu, özellikle düşük teknolojili veya genellikle cihazın diğer bölümlerinden çok daha yetenekli bir GPU'ya sahip olan çok ileri teknoloji cihazlarda önemlidir.
Genişletilebilirlik: İş için doğru araçlar
Güvenilirlik ve ölçeklenebilir performans elde ettikten sonra, geliştiricilerin HTML, CSS ve Canvas'ın yerleşik parçalarını genişletmelerine ve büyük zorluklarla kazanılan performans ve güvenilirlikten hiçbir şeyden ödün vermeyecek şekilde genişletmelerine yardımcı olacak bir dizi aracı temel alarak derlemeye hazırız.
Duyarlı tasarım, progresif oluşturma, düzgün çalışma ve yanıt verme ile ileti dizisi halinde oluşturma gibi gelişmiş kullanım alanları için yerleşik ve JavaScript açık API'ler de buna dahildir.
Chromium'un desteklediği aşağıdaki açık web API'leri, RenderingNG ile mümkün olmuştur ve daha önce imkansız olarak kabul edilmiştir.
Bunların tümü açık spesifikasyonlar ve açık web iş ortaklarıyla (diğer tarayıcılarda çalışan mühendisler, uzmanlar ve web geliştiricileri) işbirliğiyle geliştirilmiştir. Sonraki blog gönderilerinde, bunların her birini inceleyeceğiz ve RenderingNG'nin bunları nasıl mümkün kıldığını açıklayacağız.
- content-visibility: Sitelerin ekran dışı içerikler için oluşturmaktan ve şu anda gösterilmeyen tek sayfalık uygulama görünümleri için önbellek oluşturmaktan kolayca kaçınmasını sağlar.
- OffscreenCanvas: Güvenilir bir şekilde mükemmel performans için tuval oluşturmanın (2D tuval API'si ve WebGL) kendi iş parçacığında çalışmasına olanak tanır. Bu proje, web için bir başka önemli kilometre taşıdır. JavaScript'in (veya WebAssembly'nin!) birden fazla iş parçacığından tek bir web sayfası belgesi oluşturmasına izin veren ilk web API'sidir.
- Kapsayıcı sorguları: Tek bir bileşenin, kendini yanıtlayacak şekilde yerleştirmesine olanak tanıyarak tak-çalıştır bileşenleri dünyasının engellemesini kaldırır (şu anda deneysel bir uygulamadır).
- Kaynak izolasyonu: Sitelerin iframe'ler arasında daha fazla performans yalıtımı etkinleştirmesine olanak tanır.
- Ana iş parçacığı dışı boya iş parçacıkları: Geliştiricilere, birleştirici iş parçacığında çalışan kodla öğelerin boyanma şeklini genişletmeleri için bir yol sunar.
Açık web API'lerine ek olarak, RenderingNG tüm sitelerin faydalandığı bazı çok önemli "otomatik özellikleri" sunmamızı sağladı:
- Site İzolasyonu: Daha iyi güvenlik ve performans yalıtımı için kaynaklar arası iframe'leri farklı CPU işlemlerine yerleştirir.
- Vulkan, D3D12 ve Metal: GPU'ları OpenGL'den daha verimli bir şekilde kullanan alt düzey API'lerden yararlanır.
- Daha birleştirilmiş animasyonlar: SVG, arka plan rengi.
RenderingNG tarafından engelini kaldıran ve yakında kullanıma sunulacak yeni özellikler:
- Kaydırma bağlantılı animasyonlar.
- Gizli, ancak aranabilir ve erişilebilir DOM.
- Paylaşılan öğe geçişleri.
- Özel düzen.
- Ana iş parçacığı dışı birleştirme; ileti dizisini ayırma ve birleştirme.
RenderingNG'yi oluşturan temel projeler
Aşağıda, RenderingNG içindeki önemli projelerin bir listesi bulunmaktadır. Sonraki blog yayınları her birini ayrıntılı olarak gösterir.
CompositeAfterPaint
Stil, düzen ve boyama karmaşasını ortadan kaldırarak güvenilirliği ve öngörülebilir performansın büyük ölçüde artmasını, işleme hızının artmasını ve performanstan ödün vermeden daha az bellek kullanılmasını sağlar. 2014'te başlayıp bu yıl tamamlanacak.
| Yıl | İlerleme |
|---|---|
| 2015 | Görüntüleme listelerini gönderin. |
| 2017 | Yeni geçersiz kılma işlemi gönderin. |
| 2018 | Mülk ağaçlarının 1. bölümünü gönderin. |
| 2019 | Mülk ağaçlarının 2. bölümünü gönderin. |
| 2021 | Projenin gönderimi tamamlandı. |
LayoutNG
Büyük ölçüde geliştirilmiş güvenilirlik ve daha tahmin edilebilir performans için tüm düzen algoritmalarının baştan aşağı yeniden yazılması. 2016'da başladı ve bu yıl tamamlanması planlanıyor.
| Yıl | İlerleme |
|---|---|
| 2019 | Gemi bloku akışı. |
| 2020 | Esnek düzenleme, düzenleme işlemlerini gerçekleştirin. |
| 2021 | Geri kalan her şeyi gönderin. |
BlinkNG
Blink oluşturma motorunun sistematik olarak temizlenmesi ve yeniden düzenleyerek düzgün şekilde ayrılmış ardışık düzen aşamalarına dönüştürülmesi. Bu, daha iyi önbelleğe alma, daha yüksek güvenilirlik ve içerik görünürlüğü ve kapsayıcı sorguları gibi yeniden giriş veya gecikmeli oluşturma özelliklerine olanak tanır. 2014'te başladı ve giderek daha iyi hale geldi ve o zamandan beri devam ediyor. 2021'de tamamlanacak.
Her yerde GPU Hızlandırması
GPU pikselleştirmesini, çizimlerini ve animasyonlarını tüm platformlarda sürekli kullanıma sunmak için uzun vadeli bir çalışma. Her piksel paralel olarak işlenebilir. Bu nedenle GPU hızlandırması, çoğu içerik için olağanüstü bir hız sağlar. Aynı zamanda, yine de GPU'ya sahip düşük teknolojili cihazlarda performansı artırmak için etkili bir yöntemdir. 2014'te başlayıp 2020'de tamamlandı.
| Yıl | İlerleme |
|---|---|
| 2014 | Tuval desteği. Android cihazlarda isteğe bağlı içerik ile 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 gönderin. |
| 2019 | Dizi halinde GPU pikselleştirme. |
| 2020 | Kalan Android içeriğini gönderin. |
Dizi kaydırma, animasyonlar ve kod çözme
Tüm kaydırma, düzen oluşturmayan animasyonlar ve resim kodunun çözülmesini ana iş parçacığından kaldırmak için uzun vadeli bir çalışma. 2011'de başladı ve hâlâ devam ediyor.
| Yıl | İlerleme |
|---|---|
| 2011 | İleti dizisi halinde kaydırma ve animasyon için başlangıç desteği. |
| 2015 | Katman sıkıştırma. |
| 2016 | Evrensel taşma kaydırma. |
| 2017 | Birleştirici iş parçacığında resimlerin kodu çözülür. |
| 2018 | Birleştirici ileti dizisinde Resim Animasyonları. |
| 2020 | Her zaman birleşik sabit konum. |
| 2021 | Yüzde dönüşüm animasyonları, SVG animasyonları. |
Viz
Chromium için işleme hızını artıran, belleği optimize eden ve donanım özelliklerinin en iyi şekilde kullanılmasını sağlayan merkezi bir kafes ve çizim işlemi. Ayrıca, Site İzolasyonu'nun engellemesini kaldırma ve oluşturma ardışık düzenini tarayıcı kullanıcı arayüzü oluşturma işleminden ayırmak gibi web geliştiricilerinin daha az görebildiği ancak kullanıcılar tarafından çok görülebilen başka avantajları da vardır. 2016'da başlayan program 2021'de tamamlanacak.
| Yıl | İlerleme |
|---|---|
| 2018 | OOP-R; Android, Mac ve Windows'da kullanılabilir. |
| 2019 | OOP-D gönderildi. OOP-R her yere gönderilir (Kanvas hariç). SkiaRenderer, Linux ile kullanıma sunuldu. |
| 2020 | SkiaRenderer, Windows ve Android cihazlarda kullanıma sunulmuştur. Vulkan, Android'de kullanıma sunuldu. |
| 2021 | SkiaRenderer Mac'te (ve yakında ChromeOS'te) kullanıma sunulacak. |
Yukarıdaki grafikte yer alan terimlerin tanımları:
- OOP-D
- İşlem dışı görüntü birleştirici. Ekran birleştirme, OS birleştirici ile aynı etkinlik türüdür. İşlem dışı, web sayfasının oluşturma işlemi veya tarayıcının kullanıcı arayüzü işlemi yerine Viz işleminde yapılması anlamına gelir.
- OOP-K
- İşlem dışı kafes. Kafes, görüntülü reklam listelerini piksele dönüştürüyor. İş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 temel GPU API'lerinde yürütmeyi destekleyebilen yeni bir görüntüleme birleştirme uygulaması.
Mesaj dizisi halinde ve hızlandırılmış tuval oluşturma
Bu proje, OffscreenCanvas'ı mümkün kılan mimari parçaları hayata geçirmiştir. 2015'te başlayıp 2021'de tamamlanacak.
| Yıl | İlerleme |
|---|---|
| 2018 | OffscreenCanvas siparişi gönderin. |
| 2019 | ImageBitmapRenderingContext gönderin. |
| 2021 | OOP-R'yi gönderin. |
VideoNG
Web'de verimli, güvenilir ve yüksek kaliteli video oynatma sağlamak için uzun vadeli bir çalışma.
| Yıl | İlerleme |
|---|---|
| 2014 | Mojo tabanlı bir oluşturma çerçevesi tanıtıldı. |
| 2015 | Daha sorunsuz video oluşturma işlemi için Project Butter ve video yer paylaşımları gönderildi. |
| 2016 | Birleşik Android ve masaüstü bilgisayar kod çözme ve oluşturma ardışık düzenleri sunuldu. |
| 2017 | Gönderilen HDR ve renk düzeltilmiş video oluşturma işlemi. |
| 2018 | Mojo tabanlı video kod çözme ardışık düzeni gönderildi. |
| 2019 | Gönderilen yüzey tabanlı video oluşturma ardışık düzeni. |
| 2021 | ChromeOS'te 4K korumalı içerik oluşturma desteği sunuldu. |
Yukarıdaki grafikte yer alan terimlerin tanımları:
- Mojo Dili
- Chromium için yeni nesil IPC alt sistemi.
- Platform
- Viz proje tasarımının bir parçası olan bir kavram.
Sonuç
Web'de ve Chromium'da oluşturma işleminin hızı konusunda büyük heyecan duydum. RenderingNG'in sağlam temeli üzerinde inşa ettiğimiz için hızın önümüzdeki yıllarda da artmaya devam etmesini bekliyorum.
Yeni mimari, nasıl ortaya çıktığı ve işleyiş şekli hakkında çok daha fazla ayrıntıyı paylaşacak daha pek çok gönderi için bizi takip etmeye devam edin.
Unsplash'te Eirik Solheim tarafından çekilen cihaz fotoğrafı
Una Kravets tarafından yapılan resimler.