Burada, RenderingNG'nin bileşen parçalarının nasıl ayarlandığını ve oluşturma ardışık düzeninin bu parçalardan nasıl geçtiğini görebilirsiniz.
En üst düzeyden başlayarak oluşturma görevleri şunlardır:
- Ekrandaki pikselleri içerik olarak oluşturma.
- İçeriklerdeki görsel efektleri hareketlendirin.
- Girişlere yanıt olarak kaydırın.
- Geliştirici komut dosyalarının ve diğer alt sistemlerin yanıt verebilmesi için girişleri doğru yerlere verimli bir şekilde yönlendirin.
Oluşturulacak içerikler, her tarayıcı sekmesi için bir çerçeve ağacı ve tarayıcı arayüzüdür. Ayrıca dokunmatik ekranlar, fareler, klavyeler ve diğer donanım cihazlarından gelen ham giriş etkinlikleri akışı.
Her çerçeve şunları içerir:
- DOM durumu
- CSS
- Tuvaller
- Resim, video, yazı tipi ve SVG gibi harici kaynaklar
Çerçeve, bir HTML dokümanı ve bu dokümanın URL'sidir. Tarayıcı sekmesine yüklenen bir web sayfasında üst düzey bir çerçeve, üst düzey belgeye dahil edilen her iFrame için alt çerçeveler ve bunların yinelenen iFrame alt öğeleri bulunur.
Görsel efekt, bir bitmap'e uygulanan kaydırma, dönüştürme, kırpma, filtre, opaklık veya karışım gibi grafiksel bir işlemdir.
Mimari bileşenler
RenderingNG'de bu görevler mantıksal olarak çeşitli aşamalara ve kod bileşenlerine bölünür. Bileşenler, çeşitli CPU işlemlerine, iş parçalarına ve bu iş parçalarındaki alt bileşenlere dağıtılır. Her biri, tüm web içerikleri için güvenilirlik, ölçeklenebilir performans ve genişlenebilirlik elde edilmesinde önemli bir rol oynar.
Oluşturma ardışık düzeni yapısı
Oluşturma işlemi, çeşitli aşamalar ve yapıların oluşturulduğu bir ardışık düzende gerçekleşir. Her aşama, oluşturma işleminde iyi tanımlanmış bir görevi yapan kodu temsil eder. Artefaktlar, aşamaların girişleri veya çıkışları olan veri yapılarıdır.
Aşamalar:
- Animasyon: Beyan edilen zaman çizelgelerine göre hesaplanmış stilleri değiştirin ve zaman içinde mülk ağaçlarını değiştirin.
- Stil: DOM'a CSS uygulayın ve hesaplanmış stiller oluşturun.
- Düzen: DOM öğelerinin ekrandaki boyutunu ve konumunu belirleyin ve değişmez parça ağacını oluşturun.
- Önceden boyama: Mülk ağaçlarını hesaplayın ve uygun olduğunda mevcut görüntü listelerini ve GPU doku karolarını geçersiz kılın.
- Kaydırma: Mülk ağaçlarını değiştirerek dokümanların ve kaydırılabilir DOM öğelerinin kaydırma ofsetini güncelleyin.
- Boya: DOM'den GPU doku karolarının nasıl rasterleneceğini açıklayan bir görüntü listesi hesaplayın.
- Taahhüt et: Mülk ağaçlarını ve görüntüleme listesini, oluşturucu iş parçacığına kopyalayın.
- Katmanlara ayırma: Bağımsız rasterleştirme ve animasyon için görüntü listesini birleştirilmiş katman listesine ayırın.
- Raster, kod çözme ve boyama iş parçacıkları: Görüntü listelerini, kodlanmış resimleri ve boyama iş parçası kodunu sırasıyla GPU doku karolarına dönüştürün.
- Etkinleştir: GPU karolarının ekranda nasıl çizileceğini ve konumlandırılacağını, tüm görsel efektlerle birlikte gösteren bir birleştirici çerçeve oluşturun.
- Toplama: Tüm görünür kompozisyon çerçevelerindeki kompozisyon çerçevelerini tek bir global kompozisyon çerçevesinde birleştirir.
- Çizim: Ekranda piksel oluşturmak için birleştirilmiş kompozitör çerçevesini GPU'da yürütün.
Gereksiz olan oluşturma ardışık düzeni aşamaları atlanabilir. Örneğin, görsel efektlerin ve kaydırma animasyonlarının düzeni, ön boyamayı ve boyamayı atlayabilir. Bu nedenle animasyon ve kaydırma, şemada sarı ve yeşil noktalarla işaretlenmiştir. Görsel efektler için düzen, ön boyama ve boyama atlanabilirse bunlar tamamen birleştirici iş parçacığında çalıştırılabilir ve ana iş parçacığı atlanabilir.
Tarayıcı kullanıcı arayüzü oluşturma işlemi burada doğrudan gösterilmemiştir ancak aynı ardışık düzenin basitleştirilmiş bir sürümü olarak düşünülebilir (ve aslında uygulamada kodun büyük bir kısmı paylaşılır). Video (doğrudan gösterilmez) genellikle karelerin kodunu GPU doku karolarına çözen ve daha sonra bunları derleyici karelerine ve çizim adımına bağlayan bağımsız bir kodla oluşturulur.
İşlem ve mesaj dizisi yapısı
CPU işlemleri
Birden fazla CPU işleminin kullanılması, siteler arasında ve tarayıcı durumu ile GPU donanımı arasında performans ve güvenlik izolasyonu sağlar.