Yeni nesil web içeriği için hazır
RenderingNG, öncekine kıyasla çok daha iyi performans gösteren yeni nesil bir oluşturma mimarisidir. RenderingNG, sekiz yıldan uzun bir süre önce geliştirilmiştir ve birçok özel Chromium geliştiricisinin kolektif çalışmasını temsil etmektedir. Hızlı, akıcı, güvenilir, duyarlı ve etkileşimli web içeriği için büyük bir potansiyel sunar.
Burada neler yaptığımızı, neden geliştirdiğimizi ve nasıl işlediğini öğreneceksiniz.
Kuzey yıldızı golü
RenderingNG'yi motive eden esas hedef, tarayıcı motoru uygulamasının ve oluşturma API'lerinin zenginliğinin web'de kullanıcı deneyimini sınırlayan bir faktör olmamasıdır.
Özellikleri güvenilmez hale getiren tarayıcı hataları veya sitenizin oluşturulmasını bozan tarayıcı hataları konusunda endişelenmenize gerek yoktur.
Gizemli performans uçurumları olmamalıdır. Ayrıca, eksik olan yerleşik özelliklerle uğraşmanıza gerek kalmaz.
Bu şekilde çalışır.
OluşturmaNG, bu kuzey yıldızı hedefine doğru büyük bir adımdır. RenderingNG'den önce, oluşturma özellikleri ekleyip performansı iyileştirebiliyorduk, ancak bu özellikleri geliştiriciler için güvenilir hale getirmekte zorlanıyorduk ve performansta birçok uçurum vardı. Artık bu sorunların birçoğunu sistematik olarak ortadan kaldıran ve daha önce uygulanabilir görülmeyen gelişmiş özelliklerin engellemesini 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 performansa sahiptir.
- Donanım özelliklerinin (çekirdek, GPU, ekran çözünürlüğü, yenileme hızları, alt düzey kafes API'ler) 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 maliyetlerini kolayca yönetebilmeleri için geliştirici API'leri sağlar.
- Geliştirici eklentileri için oluşturma ardışık düzeni uzantı noktaları sağlar.
- Tüm içeriği optimize eder (HTML, CSS, 2D Tuval, 3D tuval, resimler, video ve yazı tipleri).
Diğer tarayıcı oluşturma motorlarıyla karşılaştırma
Gecko ve Webkit, bu blog yayınlarında açıklanan mimari özelliklerinin çoğunu uyguladı. Hatta bazı durumlarda bunları Chromium'dan önce de eklediler.
Her tarayıcı daha hızlı ve daha güvenilir hale gelir ve bu, hem kutlama hem de gerçek bir etkiye sahiptir. Nihai hedef, geliştiricilerin güvenebilmesi için tüm tarayıcılar için temel çizgisini geliştirmektir.
Başarı piramidi
Benim felsefeme göre başarı, önce güvenilirlik elde etmenin, sonra ölçeklenebilir performansın ve son olarak da kapsamı genişletmenin sonucudur.
Gerçek hayattaki piramitte olduğu gibi her seviye, yukarıdaki seviye için de sağlam bir temel oluşturur.
Güvenilirlik
Zengin ve karmaşık kullanıcı deneyimlerinin mümkün olması halinde, ilk ihtiyaç duyduğumuz şey sağlam bir platformdur. Temel özellikler ve temeller doğru şekilde çalışmalı ve zaman içinde çalışmaya devam etmelidir. Bu özelliklerin iyi bir şekilde oluşturulması ve tuhaf uç büyük/küçük harf davranışları veya hatalara sahip olmaması da aynı derecede önemlidir.
Bu nedenle, güvenilirlik RenderingNG'nin en önemli tek öğesidir. Güvenilirlik; iyi testler, kaliteli geri bildirim döngüleri, metrikler ve yazılım tasarım modelleri sonucunda ortaya çıkar.
Bana güvenilirliğin ne kadar önemli olduğunu daha iyi anlamak için son sekiz yılın büyük bölümünü sadece bu kısmı başararak geçirdik. İlk olarak, hata raporlarından yararlanarak zayıf noktaları belirleyip bunları düzelttik, kapsamlı testleri başlattık ve sitelerin performans ihtiyaçlarını ve Chromium'un performansının sınırlamalarını anladık. Ardından önemli tasarım modellerini ve veri yapılarını dikkatlice ve kademeli olarak tasarlayıp kullanıma sunduk. Ancak o zaman duyarlı tasarım, ölçeklenebilirlik ve oluşturma işleminin özelleştirilmesi için gerçek anlamda yeni nesil temel öğeler eklemeye hazır olduk.
Bu, söz konusu süre içinde Chromium'da hiçbir şeyin iyileştirilmediği anlamına gelmez. Hatta tam tersi doğrudur. Bu yıllarda her iyileştirmeyi adım adım yeniden düzenleyip kullanıma sundukça güvenilirlik ve performansta istikrarlı ve sürdürülebilir bir artış yaşandı.
Testler ve metrikler
Son 8 yılda on binlerce birim, performans ve entegrasyon testi ekledik. Ayrıca, Chromium'daki oluşturma işleminin yerel testlerde, performans karşılaştırmalarında ve gerçek sitelerde, gerçek kullanıcılar ve cihazlarla nasıl davrandığına ilişkin birçok yönü ölçen kapsamlı metrikler geliştirdik.
Ancak RenderingNG (veya başka bir tarayıcının oluşturma motoru) ne kadar mükemmel olursa olsun, tarayıcılar arasında çok fazla hata veya davranış farkı varsa web için geliştirmesi yine de kolay olmayacaktır. Bu sorunu ele almak için Web Platformu Testleri'nin kullanımını da en üst düzeye çıkarıyoruz. Bu testlerin her biri, tüm tarayıcıların geçmesi gereken web platformunun kullanım şeklini doğrular. Ayrıca zaman içinde daha fazla testi geçmek ve temel uyumluluğu artırmak için metrikleri yakından izleriz.
Web Platformu Testleri iş birliğine dayalı bir çalışmadır. Örneğin, Chromium mühendisleri, CSS özellikleri için toplam WPT testlerinin yalnızca% 10'unu eklemiştir; geri kalan her şeyi diğer tarayıcı satıcıları, bağımsız katkıda bulunanlar ve spesifikasyon yazarları da sağlamaktadır. Birlikte çalışabilir web'i geliştirmek için çok köy gerekir.
İyi yazılım tasarımı kalıpları
Kodun kolay anlaşılır olması ve hata olasılığını en aza indirecek şekilde tasarlanması durumunda, kaliteli yazılımları güvenilir bir şekilde teslim etmek de çok daha kolaydır. Sonraki blog gönderilerinde RenderingNG'nin yazılım tasarımı hakkında söyleyeceğimiz daha çok şey olacak.
Ölçeklenebilir performans
Hız, bellek ve güç kullanımı boyutlarında mükemmel performans elde etmek, RenderingNG'nin bir sonraki en önemli unsurudur. Tüm web siteleriyle etkileşimlerin sorunsuz ve duyarlı olmasını, ancak cihazın kararlılığından ödün vermemeyi istiyoruz.
Ancak yalnızca performansla kalmıyor, aynı zamanda ölçeklenebilir performans da istiyoruz. Bu, düşük kaliteli ve yüksek kaliteli makineler ile işletim sistemi platformlarında güvenilir şekilde iyi performans gösteren bir mimaridir. Buna ölçeklendirmeyi artırma (donanım cihazının başarabileceği her şeyden yararlanma ve ölçeği azaltma) diyorum. Verimliliği artırmak ve gerektiğinde sisteme olan talebi azaltmak budur.
Bunun için önbelleğe alma, performans yalıtımı ve GPU donanım hızlandırmasından en iyi şekilde yararlanmamız gerekiyordu. Bunları tek tek ele alalım. Konuyu somutlaştırmak için, bunların her birinin web sayfalarındaki son derece önemli bir etkileşim olan kaydırmaya nasıl katkıda bulunduğuna bakalım.
Önbelleğe alma
Web gibi dinamik ve etkileşimli bir kullanıcı arayüzü platformunda, önbelleğe alma, performansı önemli ölçüde artırmanın en önemli tek yoludur. Bir tarayıcıdaki en iyi bilinen önbelleğe alma türü, HTTP önbelleğidir, ancak oluşturma işleminin de birçok önbelleği vardır. Kaydırma için en önemli önbellek, önbelleğe alınan GPU dokuları ve görüntü listeleridir. Bunlar, pil tüketimini en aza indirirken ve çeşitli cihazlarda iyi performans gösterirken 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ığının performans yalıtımını engellemesidir.
Performans izolasyonu
Modern masaüstü bilgisayarlarda, arka plan uygulamalarının çalıştığınız uygulamayı yavaşlatması gibi bir endişeniz olmaz. Bunun nedeni, bir tür performans izolasyonu olan önleme amaçlı çoklu görevdir: bağımsız görevlerin birbirini yavaşlatmasını önlemektir.
Web'de performans yalıtımının en iyi örneği kaydırmadır. Ç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ığı üzerinde çünkü kaydırma işlemi son derece sorunsuz olabilir. Olası her kaydırmanın, yalnızca görüntüleme listesinin ötesine geçerek daha karmaşık durumlara kadar giden önbelleğe alma yoluyla iş parçacıklarına aktarıldığından emin olmak için RenderingNG'de çok fazla çaba harcadık. Örnekler arasında sabit ve yapışkan öğeleri temsil eden kod, pasif etkinlik işleyiciler ve yüksek kaliteli metin oluşturma yer alır.
GPU hızlandırması
GPU, piksel oluşturmayı ve ekrana çizim yapmayı çok daha hızlı hale getirir. Çoğu durumda, her piksel diğer her pikselle paralel olarak çizilebilir ve bu da hızda çok büyük artışa neden olur. OluşturmaNG'nin temel bileşenlerinden biri GPU kafesidir ve her yerde çizimdir. Bu özellik, 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 cihazın diğer parçalarına kıyasla çok daha yetenekli bir GPU'ya sahip düşük kaliteli veya çok daha üst segment cihazlarda önemlidir.
Genişletilebilirlik: İş için doğru araçlar
Güvenilirlik ve ölçeklenebilir performans elde ettiğimizde, geliştiricilerin HTML, CSS ve Canvas'ın yerleşik parçalarını genişletmesine ve zorlu performans ile güvenilirlikten ödün vermeyen bir şekilde geliştiricilerin geliştirmesine yardımcı olacak bir dizi aracı geliştirmeye hazır olacağız.
Buna, duyarlı tasarım, aşamalı oluşturma, akıcılık ve yanıt verme ile ileti dizisi oluşturma gibi ileri düzey kullanım alanları için yerleşik ve JavaScript'in gösterdiği API'ler dahildir.
Chromium'un desteklediği aşağıdaki açık web API'leri, RenderingNG tarafından geliştirilmiş ve daha önce uygulanabilir olmadığı düşünülmüştür.
Bunların tümü açık spesifikasyonlarla ve başka tarayıcılardan mühendisler, uzmanlar ve web geliştiricilerden oluşan açık web iş ortaklarıyla birlikte çalışarak 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ışındaki içeriklerle ilgili iş oluşturmayı ve şu anda gösterilmeyen tek sayfalık uygulama görüntülemeleri için önbellek oluşturmayı kolayca önlemesini sağlar.
- OffscreenCanvas: Tuval oluşturmanın (hem 2D Canvas API'si hem WebGL) güvenilir bir şekilde mükemmel performans için kendi iş parçacığında çalışmasına olanak tanır. Bu proje aynı zamanda web için bir önemli kilometre taşıdır. JavaScript'in (veya WebAssembly!) birden fazla iş parçacığından tek bir web sayfası dokümanı oluşturmasına olanak tanıyan ilk web API'sidir.
- Kapsayıcı sorguları: Tek bir bileşenin kendini duyarlı biçimde yerleştirmesine olanak tanıyarak, çalıştırılan bileşenlerden oluşan bir evrenin engelini ortadan kaldırır (şu anda deneysel bir uygulamadır).
- Kaynak izolasyonu: Sitelerin iframe'ler arasında daha fazla performans izolasyonunu etkinleştirmesine olanak tanır.
- Ana iş parçacığı dışı boya iş akışları: Geliştiricilere, birleştirici iş parçacığı üzerinde çalışan kodla öğelerin boyanma şeklini genişletme olanağı sunar.
Açık web API'lerine ek olarak, RenderingNG, tüm sitelerin yararlandığı çok önemli bazı "otomatik özellikleri" sunmamıza olanak tanıdı:
- Site İzolasyonu: Daha iyi güvenlik ve performans izolasyonu için kaynaklar arası iframe'leri farklı CPU işlemlerine yerleştirir.
- Vulkan, D3D12 ve Metal: OpenGL'den daha verimli şekilde GPU'ları kullanan alt düzey API'lerden yararlanır.
- Daha fazla birleştirilmiş animasyon: SVG, arka plan rengi.
RenderingNG tarafından engellenecek ve yakında kullanıma sunulacak ve bizi heyecanlandıran diğer ek ö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, iş parçacığı işlemeyi ayırma ve birleştirme.
RenderingNG'yi oluşturan temel projeler
RenderingNG içindeki temel projelerin listesi aşağıda verilmiştir.
CompositeAfterPaint
CompositeAfterPaint, birleştirmeyi stil, düzen ve boyadan ayıklar. Böylece, çok daha yüksek güvenilirlik ve tahmin edilebilir performans, daha yüksek işleme hızı ve performanstan ödün vermeden daha az bellek kullanılır.
| Yıl | İlerleme |
|---|---|
| 2015 | Ekran listelerini gönderin. |
| 2017 | Yeni geçersiz kılmayı 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önderimini tamamlamak. |
LayoutNG
Tüm düzen algoritmalarının, büyük ölçüde iyileştirilmiş güvenilirlik ve daha tahmin edilebilir performans için baştan sona yeniden yazılması.
LayoutNG hakkında daha fazla bilgi edinin.
| Yıl | İlerleme |
|---|---|
| 2019 | Gemi blok akışı. |
| 2020 | Esnek tasarım, düzenleme. |
| 2021 | Diğer her şeyi gönderin. |
BlinkNG
Blink oluşturma motorunu yeniden düzenledik ve rahatça ayrılmış ardışık düzen aşamalarına ayırdık. Bu da daha iyi önbelleğe alma, daha yüksek güvenilirlik ve içerik görünürlüğü ve container sorguları gibi yeniden katılımcı veya gecikmeli oluşturma özelliklerine olanak tanır.
GPU Hızlandırması her yerde
Her piksel paralel olarak işlenebileceğinden GPU hızlandırması çoğu içerik için olağanüstü bir hız artışı sağlar. Bu, genellikle GPU'ya sahip olan düşük kaliteli cihazlarda performansı artırmak için de etkili bir yöntemdir.
| Yıl | İlerleme |
|---|---|
| 2014 | Canvas desteği. Android'de isteğe bağlı içerikte yayınlanır. |
| 2016 | Mac'te gönder. |
| 2017 | GPU, Android sayfa görüntülemelerinin% 60'ından fazlasında kullanılıyor. |
| 2018 | Windows, ChromeOS ve Android Go'da gönderin. |
| 2019 | Dizi halinde GPU pikselleştirmesi. |
| 2020 | Kalan Android içeriğini gönderin. |
Dizili kaydırma, animasyonlar ve kod çözme
Tüm kaydırma, düzen oluşturmayan animasyonları ve görüntü kodu çözmeyi ana iş parçacığından taşımak için uzun vadeli bir çaba. Süreç devam ediyor.
| Yıl | İlerleme |
|---|---|
| 2011 | İleti dizisi görünümü ve animasyon için ilk destek. |
| 2015 | Katman sıkıştırma. |
| 2016 | Evrensel taşma kaydırması. |
| 2017 | Birleştirici iş parçacığındaki resim kod çözücüler. |
| 2018 | Birleştirici iş parçacığında Resim Animasyonları. |
| 2020 | Sabit konumu her zaman birleştirin. |
| 2021 | Dönüşüm animasyonlarının yüzdesi, SVG animasyonları. |
Viz
Chromium için işleme hızını artıran, belleği optimize eden ve donanım özelliklerinin optimum kullanımını sağlayan merkezi bir kafes ve çizim işlemi. Web geliştiricileri tarafından daha az görülse de site izolasyonunun engelini kaldırma ve oluşturma ardışık düzenini tarayıcı kullanıcı arayüzü oluşturma işleminden ayırma gibi diğer avantajları kullanıcılar tarafından çok daha fazla görülebilir.
| Yıl | İlerleme |
|---|---|
| 2018 | Android, Mac ve Windows'da OOP-R desteği sunulur. |
| 2019 | OOP-D gönderildi. OOP-R her yere gönderilir (Kanvas hariç). SkiaRenderer Linux ile gönderilir. |
| 2020 | SkiaRenderer, Windows ve Android'de kullanıma sunulmuştur. Vulkan, Android ile gönderildi. |
| 2021 | SkiaRenderer, Mac'te (ve yakında ChromeOS'te) de kullanıma sunuluyor. |
Yukarıdaki grafikte yer alan terimlerin tanımları:
- OOP-D
- İşlem dışı görüntü birleştirici. Ekran birleştirme, işletim sistemi 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-R
- İşlem dışı kafes. Raster, görüntülü reklam listelerini piksellere dönüştürüyor. İşlem dışı, işlemin web sayfasının oluşturma işlemi yerine Viz işleminde yapılması anlamına gelir.
- SkiaRenderer
- Vulkan, D3D12 veya Metal gibi temeldeki farklı GPU API'lerinde yürütmeyi destekleyebilen yeni bir ekran birleştirici uygulaması.
Mesaj dizili ve hızlandırılmış tuval oluşturma
OffscreenCanvas'ı mümkün kılan proje budur.
| Yıl | İlerleme |
|---|---|
| 2018 | OffscreenCanvas'ı gönderin. |
| 2019 | ImageBitmapRenderingContext'i gönderin. |
| 2021 | OOP-R olarak 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ı gönderildi. |
| 2016 | Birleştirilmiş Android ve masaüstü kod çözme ve oluşturma ardışık düzenleri gönderildi. |
| 2017 | HDR ve renk düzeltilmiş video oluşturma işlemi gönderildi. |
| 2018 | Mojo tabanlı video kod çözme ardışık düzeni gönderildi. |
| 2019 | Gönderilmiş 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ı kapsamında sunulan bir kavram.
Çizimler: Una Kravets.