RenderingNG'deki temel veri yapıları

Chris Harrelson
Chris Harrelson
X GitHub
Daniel Cheng
Daniel Cheng
GitHub
Philip Rogers
Philip Rogers
GitHub
Koji Ishi
Koji Ishi
GitHub
Ian Kilpatrick
Ian Kilpatrick
GitHub
Kyle Charbonneau
Kyle Charbonneau

Temel veri yapılarına göz atalım. Bunlar, oluşturma ardışık düzeninin girişleri ve çıkışıdır.

Bu veri yapıları şunlardır:

  • Çerçeve ağaçları, hangi web dokümanlarının oluşturma işlemi içinde olduğunu ve hangi Blink oluşturucuyu temsil eden yerel ve uzak düğümlerden oluşur.
  • Sabit parça ağacı, düzen kısıtlama algoritmasının çıkışını (ve girdisini) temsil eder.
  • Mülk ağaçları, bir web belgesinin dönüştürme, kırpma, efekt ve kaydırma hiyerarşisini temsil eder. Bunlar ardışık düzen boyunca kullanılır.
  • Ekran listeleri ve boyama parçaları, kafes ve katmanlaştırma algoritmalarına yapılan girişlerdir.
  • Oluşturucu çerçeveleri, GPU'yu kullanarak çizim yapmak için kullanılan yüzeyleri, oluşturma yüzeylerini ve GPU doku karolarını kapsar.

Bu veri yapılarını gözden geçirmeden önce aşağıdaki örnek, mimari incelemesinden alınan bir örneği temel alır. Bu örnek, veri yapılarının bu örnek için nasıl geçerli olduğunu gösteren gösterimlerle birlikte bu belgede kullanılmaktadır.

<!-- Example code -->
<html>
  <div style="overflow: hidden; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
      id="one" src="foo.com/etc"></iframe>
  </div>
  <iframe style="top:200px;
    transform: scale(1.1) translateX(200px)"
    id="two" src="bar.com"></iframe>
</html>

Ağaçları çerçevele

Chrome bazen kaynakta farklı bir çerçeve oluşturmayı seçebilir.

Örnek kodda toplam üç kare vardır:

İki iframe içeren foo.com üst çerçevesi.

Site yalıtımı ile Chromium, bu web sayfasını oluşturmak için iki oluşturma işlemi kullanır. Her oluşturma işleminin, ilgili web sayfası için çerçeve ağacını temsil eden kendi yöntemi vardır:

İki oluşturma işlemini temsil eden iki çerçeve ağacı.

Farklı bir işlemde oluşturulan kareler uzak kare olarak temsil edilir. Uzak çerçeve, oluşturma işleminde yer tutucu olarak hareket etmek için gereken minimum bilgileri (ör. boyutları) içerir. Aksi takdirde uzak çerçeve, gerçek içeriğini oluşturmak için gereken hiçbir bilgiyi içermez.

Buna karşılık yerel çerçeve, standart oluşturma ardışık düzeninden geçen bir çerçeveyi temsil eder. Yerel çerçeve, ilgili çerçevenin verilerini (DOM ağacı ve stil verileri gibi) oluşturulup görüntülenebilecek bir öğeye dönüştürmek için gereken tüm bilgileri içerir.

Oluşturma ardışık düzeni, yerel çerçeve ağacı parçasının ayrıntı düzeyinde çalışır. Ana çerçeve olarak foo.com'ün kullanıldığı daha karmaşık bir örneği ele alalım:

<iframe src="bar.com"></iframe>

Ayrıca aşağıdaki bar.com alt çerçevesi:

<iframe src="foo.com/etc"></iframe>

Hâlâ yalnızca iki oluşturucu olsa da şu anda üç yerel çerçeve ağacı parçası vardır. Bunlardan ikisi foo.com oluşturma işleminde, bir tanesi ise bar.com için oluşturma işlemindedir:

İki oluşturma işleminin ve üç çerçeve ağacı parçasının temsili.

Web sayfası için bir oluşturucu çerçevesi oluşturmak amacıyla Viz, aynı anda üç yerel çerçeve ağacının her birinin kök çerçevesinden bir birleştirici çerçeve ister ve ardından bunları birleştirir. Oluşturucu çerçeveleri bölümüne de bakın.

foo.com ana çerçevesi ve foo.com/other-page alt çerçevesi aynı çerçeve ağacının bir parçasıdır ve aynı işlemde oluşturulur. Ancak farklı yerel çerçeve ağacı parçalarının parçası oldukları için iki çerçevenin bağımsız belge yaşam döngüleri vardır. Bu nedenle, tek bir güncellemede her ikisi için de bir kompozisyon çerçevesi oluşturmak mümkün değildir. Oluşturma işleminde, foo.com/other-page için oluşturulan kompozisyon çerçevesini doğrudan foo.com ana çerçevesinin kompozisyon çerçevesine yerleştirmek için yeterli bilgi yok. Örneğin, işlem dışı bar.com üst çerçeve, iframe'i CSS ile dönüştürerek veya iframe'in bölümlerini DOM'undaki diğer öğelerle kapatarak foo.com/other-url iframe'inin görüntülenmesini etkileyebilir.

Görsel mülk güncelleme şelalesi

Cihaz ölçek faktörü ve görüntü alanı boyutu gibi görsel özellikler, oluşturulan çıkışı etkiler ve yerel çerçeve ağacı parçaları arasında senkronize edilmelidir. Her yerel kare ağacı parçasının kökünde, kendisiyle ilişkilendirilmiş bir widget nesnesi bulunur. Görsel mülk güncellemeleri, ana çerçevenin widget'ına gider ve ardından yukarıdan aşağıya kalan widget'lara dağıtılır.

Örneğin, görüntü alanı boyutu değiştiğinde:

Önceki metinde açıklanan sürecin şeması.

Bu işlem anında gerçekleşmediğinden, kopyalanan görsel mülkler bir senkronizasyon jetonu da içerir. Viz kompozitörü, tüm yerel kare ağacı parçalarının mevcut senkronizasyon jetonuyla bir kompozitör karesi göndermesini beklemek için bu senkronizasyon jetonunu kullanır. Bu işlem, farklı görsel özelliklere sahip kompozisyon çerçevelerinin karıştırılmasını önler.

Değiştirilemez parça ağacı

Değiştirilemez parça ağacı, oluşturma ardışık düzeninin düzen aşamasının çıktısıdır. Sayfadaki tüm öğelerin konumunu ve boyutunu (dönüşümler uygulanmadan) temsil eder.

Her ağaçtaki parçaların gösterimi. Bir parça, düzene ihtiyaç duyduğu şekilde işaretlenmiştir.

Her bir parça, bir DOM öğesinin bir bölümünü temsil eder. Genellikle öğe başına yalnızca bir parça bulunur, ancak yazdırırken farklı sayfalara, çok sütunlu bir bağlamda ise sütunlara bölünüyorsa daha fazla parça olabilir.

Düzenden sonra her parça sabit hale gelir ve bir daha değiştirilmez. Ayrıca, birkaç ek kısıtlama da uygularız. Aşağıdakileri yapmayız:

  • Ağaçta "yukarı" referanslarına izin verin. (Bir alt öğenin, üst öğesine işaretçisi olamaz.)
  • Ağda verileri "toplama" (bir alt öğe, yalnızca alt öğelerinden gelen bilgileri okur, üst öğesinden gelen bilgileri okumaz).

Bu kısıtlamalar, bir fragmanı sonraki bir düzen için yeniden kullanmamıza olanak tanır. Bu kısıtlamalar olmadan genellikle ağacın tamamını yeniden oluşturmamız gerekir. Bu da pahalıdır.

Çoğu düzen genellikle artımlı güncellemedir. Örneğin, kullanıcı bir öğeyi tıkladığında kullanıcı arayüzünün küçük bir bölümünü güncelleyen bir web uygulaması. İdeal olarak, düzen yalnızca ekranda gerçekten değişenlerle orantılı olarak çalışmalıdır. Bunu, önceki ağacın mümkün olduğunca fazla bölümünü yeniden kullanarak yapabiliriz. Bu nedenle, genellikle yalnızca ağacın ana hattını yeniden oluşturmamız gerekir.

Gelecekte bu değişmez tasarım, gerektiğinde değişmez parça ağacını iş parçacığı sınırları boyunca iletmek (sonraki aşamaları farklı bir iş parçacığında gerçekleştirmek için), sorunsuz bir düzen animasyonu için birden fazla ağaç oluşturmak veya paralel spekülatif düzenler gerçekleştirmek gibi ilginç şeyler yapmamıza olanak tanıyabilir. Ayrıca, çoklu iş parçacıklı düzenin potansiyelini de bize sunar.

Satır içi parça öğeleri

Satır içi içerik (çoğunlukla stilize edilmiş metin) biraz farklı bir temsil kullanır. Satır içi içeriği, kutular ve işaretçiler içeren bir ağaç yapısı yerine ağacı temsil eden düz bir listede gösteririz. Birincil avantaj, satır içi veriler için düz liste temsilinin hızlı olması, satır içi veri yapılarını incelemek veya sorgulamak için kullanışlı olması ve bellek açısından verimli olmasıdır. Metin oluşturma işlemi çok karmaşık olduğundan ve yüksek düzeyde optimize edilmediği sürece kolayca ardışık düzenin en yavaş parçası haline gelebileceğinden bu, web oluşturma performansı açısından son derece önemlidir.

Düz liste, her satır içi biçimlendirme bağlamı için satır içi düzen alt ağacının derinlik öncelikli arama sırasına göre oluşturulur. Listedeki her giriş, (nesne, alt öğe sayısı) bir tuple'dir. Örneğin, şu DOM'u ele alalım:

<div style="width: 0;">
  <span style="color: blue; position: relative;">Hi</span> <b>there</b>.
</div>

Satırın "Merhaba" ile "orada" arasında kaydırılmasını sağlamak için width mülkü 0 olarak ayarlanır.

Bu durum için satır içi biçimlendirme bağlamı bir ağaç olarak temsil edildiğinde aşağıdaki gibi görünür:

{
  "Line box": {
    "Box <span>": {
      "Text": "Hi"
    }
  },
  "Line box": {
    "Box <b>": {
      "Text": "There"
    }
  },
  {
    "Text": "."
  }
}

Düz liste şöyle görünür:

  • (Çizgi kutusu, 2)
  • (Kare <span>, 1)
  • ("Merhaba" metni, 0)
  • (Çizgi kutusu, 3)
  • (Kare <b>, 1)
  • ("there" metni, 0)
  • (Metin ".", 0)

Bu veri yapısının birçok kullanıcısı vardır: erişilebilirlik API'leri ve getClientRects ile contenteditable gibi geometri API'leri. Her birinin farklı şartları vardır. Bu bileşenler, düz veri yapısına kolaylık imleci üzerinden erişir.

İmleç'te MoveToNext, MoveToNextLine, CursorForChildren gibi API'ler bulunur. Bu imleç gösterimi, metin içeriği için birden fazla nedenden dolayı çok güçlüdür:

  • Derinlik öncelikli arama sırasına göre iterasyon çok hızlıdır. Bu yöntem, imleç hareketlerine benzer olduğu için çok sık kullanılır. Bu düz bir liste olduğundan, derinlik öncelikli arama yalnızca dizi ofsetini artırarak hızlı iterasyonlar ve bellek konumu sağlar.
  • Örneğin, satır ve satır içi kutuların arka planını boyarken gerekli olan geniş kapsamlı arama sağlar.
  • Alt öğelerin sayısını bilmek, sonraki kardeş öğeye hızlı bir şekilde geçmenizi sağlar (dizi ofsetini bu sayıyla artırmanız yeterlidir).

Mülk ağaçları

DOM, öğe ağacıdır (ve metin düğümleri) ve CSS, öğelere çeşitli stiller uygulayabilir.

Bu dört şekilde görünür:

  • Düzen: Düzen kısıtlaması algoritmasına girişler.
  • Boya: Öğenin nasıl boyanacağı ve kafesleneceği (ancak alt öğelerinin değil).
  • Görsel: Dönüşümler, filtreler ve kırpma gibi DOM alt ağacına uygulanan raster/çizim efektleri.
  • Kaydırma: İçerideki alt ağacın eksenle hizalanmış ve yuvarlatılmış köşe kırpma ve kaydırma.

Özellik ağaçları, görsel ve kaydırma efektlerinin DOM öğelerine nasıl uygulandığını açıklayan veri yapılarıdır. Bu modeller, aşağıdaki gibi soruları yanıtlamanızı sağlar: Belirli bir DOM öğesi, düzen boyutu ve konumu göz önüne alındığında ekrana göre nerededir? Ayrıca: Görsel ve kaydırma efektleri uygulamak için hangi GPU işlemleri dizisi kullanılmalıdır?

Web'deki görsel ve kaydırma efektleri, tüm ihtişamıyla çok karmaşıktır. Dolayısıyla mülk ağaçlarının yaptığı en önemli şey, bu karmaşıklığı yapılarını ve anlamlarını tam olarak temsil eden tek bir veri yapısına dönüştürmek ve aynı zamanda DOM ile CSS'nin karmaşıklığının geri kalanını kaldırmaktır. Bu sayede, oluşturma ve kaydırma algoritmalarını çok daha güvenle uygulayabiliyoruz. Özellikle:

  • Hataya açık olabilecek geometri ve diğer hesaplamalar tek bir yerde toplanabilir.
  • Mülk ağaçlarını oluşturma ve güncelleme işleminin karmaşıklığı tek bir oluşturma ardışık düzeni aşamasında yalıtılmıştır.
  • Mülk ağaçlarını farklı iş parçacıklarına ve işlemlere göndermek, tam DOM durumundan çok daha kolay ve hızlıdır. Bu sayede, mülkleri birçok kullanım alanında kullanabilirsiniz.
  • Kullanım alanı ne kadar fazla olursa, birbirlerinin önbelleğini yeniden kullanabildikleri için bu temel üzerine inşa edilen geometri önbelleğe alma özelliğinden o kadar fazla kazanç elde edebiliriz.

RenderingNG, özellik ağaçlarını aşağıdakiler gibi birçok amaç için kullanır:

  • Birleştirmeyi boyadan ayırma ve ana iş parçacığından birleştirme.
  • En uygun kompozisyon / çizim stratejisini belirleme.
  • IntersectionObserver geometrisini ölçme.
  • Ekran dışı öğeler ve GPU doku karoları için çalışma yapmaktan kaçının.
  • Boya ve rasteri verimli ve doğru bir şekilde geçersiz kılma.
  • Core Web Vitals'da layout shift ve Largest Contentful Paint ölçümü.

Her web belgesinin dört ayrı özellik ağacı vardır: dönüştürme, kırpma, efekt ve kaydırma.(*) Dönüşüm ağacı, CSS dönüşümlerini ve kaydırma işlemlerini temsil eder. (Kaydırma dönüşümü, 2D dönüşüm matrisi olarak temsil edilir.) Klip ağacı, taşma kliplerini temsil eder. Efekt ağacı, diğer tüm görsel efektleri (ör. opaklık, filtreler, maskeler, karışım modları ve clip-path gibi diğer klip türleri) temsil eder. Kaydırma ağacı, kaydırmalarla ilgili bilgileri (ör. kaydırmaların birlikte nasıl zincirlendiği) temsil eder. Bu ağaç, oluşturucu iş parçacığında kaydırma işlemini gerçekleştirmek için gereklidir. Mülk ağacındaki her düğüm, bir DOM öğesi tarafından uygulanan bir kaydırma veya görsel efekti temsil eder. Birden fazla etkisi varsa aynı öğe için her bir ağaçta birden fazla özellik ağacı düğümü olabilir.

Her ağacın topolojisi, DOM'un seyrek bir temsili gibidir. Örneğin, taşma kliplerine sahip üç DOM öğesi varsa üç klip ağacı düğümü olur ve klip ağacının yapısı, taşma klipleri arasındaki kapsayıcı blok ilişkisini izler. Ağaçlar arasında da bağlantılar vardır. Bu bağlantılar, düğümlerin göreli DOM hiyerarşisini ve dolayısıyla uygulama sırasını gösterir. Örneğin, bir DOM öğesindeki dönüşüm, filtreye sahip başka bir DOM öğesinin altındaysa dönüşüm, filtreden önce uygulanır.

Her DOM öğesinin, söz konusu öğede geçerli olan en yakın ata klibi, dönüştürme ve efekt ağacı düğümlerini belirten 4'lü bir mülk ağacı durumu (dönüştürme, kırpma, efekt, kaydırma) vardır. Bu bilgiler sayesinde, söz konusu öğeye uygulanan kliplerin, dönüştürme işlemlerinin ve efektlerin listesini ve hangi sırayla uygulandığını tam olarak biliriz. Bu, nesnenin ekranda nerede olduğunu ve nasıl çizileceğini bize bildirir.

Örnek

(source)

<html>
  <div style="overflow: scroll; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
  id="one" srcdoc="iframe one"></iframe>
  </div>
  <iframe style="top:200px;
      transform: scale(1.1) translateX(200px)" id=two
      srcdoc="iframe two"></iframe>
</html>

Önceki örnekte (girişteki örnekten biraz farklıdır), oluşturulan mülk ağaçlarının temel unsurları şunlardır:

Mülk ağacındaki çeşitli öğeleri gösteren örnek.

Listeleri ve boya parçalarını görüntüleme

Görüntü öğesi, Skia ile rasterleştirilebilen düşük düzeyli çizim komutları (buraya bakın) içerir. Görüntüleme öğeleri genellikle, kenarlık veya arka plan çizme gibi birkaç çizim komutuyla basittir. Boyama ağacı yürüyüşü, bir görüntü öğesi listesi oluşturmak için CSS boyama sırasını izleyerek düzen ağacını ve ilişkili parçaları iteratif olarak işler.

Örneğin:

Yeşil bir dikdörtgenin içinde &quot;Merhaba dünya&quot; yazan mavi bir kutu.

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="blue" style="width:100px;
  height:100px; background:blue;
  position:absolute;
  top:0; left:0; z-index:-1;">
</div>

Bu HTML ve CSS, her hücrenin bir görüntüleme öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görünümün arka planı Arka plandaki dil: #blue Arka plandaki dil: #green #green satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. 0,0 konumunda 100x100 boyutunda ve mavi renkte drawRect. 8,8 konumunda 80x18 boyutunda ve yeşil renkli drawRect. Konumu 8,8 ve metni "Hello world" olan drawTextBlob.

Görüntülü reklam öğe listesi arkaya doğru sıralanır. Yukarıdaki örnekte, yeşil div DOM sırasına göre mavi div'den önce gelir ancak CSS boyama sırası, negatif z-dizini mavi div'in yeşil div'den önce (3. adım) boyanmasını gerektirir (4.1. adım). Görüntüleme öğeleri, CSS boyama sırası spesifikasyonunun atomik adımlarına kabaca karşılık gelir. Tek bir DOM öğesi, birden fazla görüntüleme öğesine neden olabilir. Örneğin, #green'in arka plan için bir görüntüleme öğesi ve satır içi metin için başka bir görüntüleme öğesi vardır. Bu ayrıntı düzeyi, CSS boyama siparişi spesifikasyonunun tam karmaşıklığını (ör. negatif kenar boşluğuyla oluşturulan boşluk bırakma) temsil etmek için önemlidir:

Kısmen örtüşen gri bir kutu ve &quot;Merhaba dünya&quot; kelimelerinin yer aldığı yeşil bir dikdörtgen.

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="gray" style="width:35px; height:20px;
  background:gray;margin-top:-10px;"></div>

Bu işlem, her hücrenin bir görüntüleme öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görüntünün arka planı Arka plandaki dil: #green Arka plandaki dil: #gray #green satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. 8,8 konumunda 80x18 boyutunda ve yeşil renkli drawRect. 8,16 konumunda 35x20 boyutunda ve gri renkli drawRect. 8,8 konumunda ve "Merhaba dünya" metnine sahip drawTextBlob.

Görüntüleme öğesi listesi saklanır ve sonraki güncellemeler tarafından yeniden kullanılır. Boyama ağacı yürüyüşü sırasında bir düzen nesnesi değişmediyse bu nesnenin görüntüleme öğeleri önceki listeden kopyalanır. Ek optimizasyon, CSS boyama sırası spesifikasyonunun bir özelliğine dayanır: Yığma bağlamları atomik olarak boyanır. Yığma bağlamında herhangi bir düzen nesnesi değişmediyse boya ağacı yürüyüşünde yığma bağlamı atlanır ve önceki listede bulunan görüntülü reklam öğeleri dizisinin tamamı kopyalanır.

Mevcut mülk ağacı durumu, ağaç boyama gezisi sırasında korunur ve görüntü öğesi listesi, aynı mülk ağacı durumunu paylaşan görüntü öğesi "grupları" halinde gruplandırılır. Bu durum aşağıdaki örnekte gösterilmektedir:

Eğimli turuncu bir kutunun bulunduğu pembe bir kutu.

<div id="scroll" style="background:pink; width:100px;
   height:100px; overflow:scroll;
   position:absolute; top:0; left:0;">
    Hello world
    <div id="orange" style="width:75px; height:200px;
      background:orange; transform:rotateZ(25deg);">
        I'm falling
    </div>
</div>

Bu işlem, her hücrenin bir görüntüleme öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görünümün arka planı Arka plandaki dil: #scroll #scroll satır içi metin Arka plandaki dil: #orange #orange satır içi metin
drawRect boyutu 800x600 ve rengi beyaz olmalıdır. 0,0 konumunda 100x100 boyutunda ve pembe renkli drawRect. Konumu 0,0 ve metni "Merhaba dünya" olan drawTextBlob. 0,0 konumunda 75x200 boyutunda ve turuncu renkli drawRect. 0,0 konumunda ve "Düşüyorum" metnine sahip drawTextBlob.

Dönüşüm özelliği ağacı ve boyama parçaları şu şekilde olur (özetlemek için basitleştirilmiştir):

Parça 1&#39;deki ilk iki hücre, parça 2&#39;deki üçüncü hücre ve parça 3&#39;teki son iki hücre olmak üzere önceki tablonun resmi.

Görüntü öğesi grupları ve bir mülk ağacı durumu olan boya parçalarının sıralı listesi, oluşturma ardışık düzeninin katman oluşturma adımına verilen girişlerdir. Boya parçası listesinin tamamı tek bir birleştirilmiş katmanda birleştirilebilir ve birlikte rasterleştirilebilir ancak bu işlem, kullanıcı her kaydırdığında pahalı rasterleştirme gerektirir. Her boya parçası için birleştirilmiş bir katman oluşturulabilir ve tüm yeniden rasterleştirme işlemlerini önlemek için ayrı ayrı rasterleştirilebilir ancak bu işlem GPU belleğini hızla tüketir. Katmanlara ayırma adımında, GPU belleği ile koşullar değiştiğinde maliyetleri azaltma arasında bir denge kurulmalıdır. Parçaları varsayılan olarak birleştirmek, birleştirici iş parçacığı kaydırma veya birleştirici iş parçacığı dönüşümü animasyonlarında olduğu gibi, birleştirici iş parçacığında değişmesi beklenen boyama parçalarını birleştirmemek iyi bir genel yaklaşım olur.

Önceki örnekte ideal olarak iki birleştirilmiş katman oluşturulur:

  • Çizim komutlarını içeren 800x600 birleşik katman:
    1. drawRect boyutu 800x600 ve rengi beyaz
    2. 0,0 konumunda 100x100 boyutunda ve pembe renkli drawRect
  • Çizim komutlarını içeren 144x224 birleşik katman:
    1. 0,0 konumunda ve "Merhaba dünya" metnine sahip drawTextBlob
    2. çevir 0,18
    3. rotateZ(25deg)
    4. 0,0 konumunda 75x200 boyutunda ve turuncu renkli drawRect
    5. 0,0 konumunda ve "Düşüyorum" metnine sahip drawTextBlob

Kullanıcı ekranı kaydırırsa #scroll, ikinci birleştirilmiş katman taşınır ancak rasterleştirme gerekmez.

Örnekte, mülk ağaçları ile ilgili önceki bölümde altı boya parçası vardır. (Dönüştürme, klip, efekt, kaydırma) özellik ağacı durumlarıyla birlikte şunlardır:

  • Doküman arka planı: doküman kaydırma, doküman klibi, kök, doküman kaydırma.
  • Div için yatay, dikey ve kaydırma köşesi (üç ayrı boyama parçası): doküman kaydırma, doküman kırpma, #one bulanıklaştırma, doküman kaydırma.
  • #one iFrame: #one döndürme, taşma kaydırma klibi, #one bulanıklaştırma, div kaydırma.
  • #two iFrame: #two ölçek, doküman klibi, kök, doküman kaydırma.

Oluşturucu kareleri: yüzeyler, oluşturma yüzeyleri ve GPU doku karoları

Tarayıcı ve oluşturma işlemleri içeriğin rasterleştirilmesini yönetir, ardından ekranda gösterilmesi için kompozisyon çerçevelerini Viz işlemine gönderir. Birleştirme çerçeveleri, pikselleştirilmiş içeriğin birlikte nasıl birleştirileceğini ve GPU kullanılarak verimli bir şekilde nasıl çizileceğini temsil eder.

Kartlar

Teoride, bir oluşturma işlemi veya tarayıcı işlemi birleştirici, pikselleri oluşturucu görüntü alanının tam boyutunda tek bir doku halinde pikselleştirebilir ve bu dokuyu Viz'e gönderebilir. Görüntü birleştiricinin bunu görüntülemek için yalnızca bu tek dokudaki pikselleri çerçeve arabelleğindeki uygun konuma (örneğin, ekran) kopyalaması gerekir. Ancak bu derleyici tek bir pikseli bile güncellemek isterse tüm görüntü alanını yeniden rasterize etmesi ve Viz'e yeni bir doku göndermesi gerekir.

Bunun yerine, görüntü alanı karolara bölünür. Ayrı bir GPU doku karosu, her karoyu görüntü alanının bir kısmı için rasterleştirilmiş piksellerle destekler. Oluşturucu daha sonra karoları tek tek güncelleyebilir veya mevcut karoların ekrandaki konumunu değiştirebilir. Örneğin, bir web sitesini kaydırırken mevcut karoların konumu yukarı kayabilir ve yeni bir karonun sayfanın daha alt kısımlarındaki içerikler için pikselleştirilmesi gerekebilir.

Dört karo.
Bu resimde, dört karo içeren güneşli bir gün resmi gösterilmektedir. Ekran kaydırıldığında beşinci bir kart görünmeye başlar. Kartlardan birinin tek bir rengi (gök mavisi) var ve üstte bir video ile bir iframe bulunuyor.

Dörtler ve yüzeyler

GPU doku karoları, bir doku kategorisinin süslü bir adı olan özel bir dörtgen türüdür. Dörtgen, giriş dokusunu tanımlar ve dokuya nasıl dönüştürüleceğini ve görsel efektlerin nasıl uygulanacağını belirtir. Örneğin, normal içerik kartlarında, kart ızgarasındaki x, y konumlarını belirten bir dönüştürme vardır.

GPU doku karoları.

Bu rasterleştirilmiş karolar, dörtgenlerin listesi olan bir oluşturma geçişine sarılır. Oluşturma geçişi, piksel bilgisi içermez. Bunun yerine, istenen piksel çıkışını oluşturmak için her dörtgenin nerede ve nasıl çizileceğine dair talimatlar içerir. Her GPU doku karosu için bir çizim dörtgeni vardır. Görüntü derleyicinin, oluşturma geçişi için istenen piksel çıkışını oluşturmak üzere dörtlü liste üzerinde iterasyon yapması ve her birini belirtilen görsel efektlerle çizmesi yeterlidir. İzin verilen görsel efektler doğrudan GPU özellikleriyle eşleşecek şekilde dikkatlice seçildiğinden, bir oluşturma geçişi için çizim dörtgenlerini birleştirmek GPU'da verimli bir şekilde yapılabilir.

Rastgele ızgaraların dışında başka çizim dörtgenleri de vardır. Örneğin, hiç doku tarafından desteklenmeyen düz renkli çizim dörtlüsleri veya video ya da tuval gibi karo olmayan dokular için doku çizim dörtlüsü vardır.

Bir kompozisyon çerçevesinin başka bir kompozisyon çerçevesini yerleştirmesi de mümkündür. Örneğin, tarayıcı birleştirici, tarayıcı kullanıcı arayüzüyle bir birleştirici çerçevesi ve oluşturma birleştirici içeriğinin yerleştirileceği boş bir dikdörtgen oluşturur. Site izolasyonu uygulanmış iFrame'ler de buna örnek gösterilebilir. Bu yerleştirme platformlar aracılığıyla gerçekleştirilir.

Bir besteci, bir oluşturucu çerçevesi gönderdiğinde bu çerçeveye yüzey kimliği adı verilen bir tanımlayıcı eşlik eder. Bu tanımlayıcı, diğer birleştirici çerçevelerinin bunu referans olarak yerleştirmesini sağlar. Belirli bir yüzey kimliğiyle gönderilen en yeni birleştirici karesi Viz tarafından depolanır. Daha sonra başka bir birleştirme çerçevesi de bu çerçeveye bir yüzey çizim dörtgeni ile başvurabilir ve böylece Viz ne çizeceğini bilir. (Yüzey çizme dörtgenlerinin yalnızca yüzey kimlikleri içerdiğini, doku içermediğini unutmayın.)

Ara oluşturma geçişleri

Birçok filtre veya gelişmiş karışım modu gibi bazı görsel efektler, ara bir dokuya iki veya daha fazla dörtgen çizilmesini gerektirir. Ardından, ara doku GPU'daki bir hedef arabelleğe (veya başka bir ara dokuya) çizilir ve görsel efekt aynı anda uygulanır. Bu nedenle, bir birleştirici çerçevesi aslında oluşturma geçişlerinin bir listesini içerir. Her zaman en son çizilen ve hedefi çerçeve arabelleğine karşılık gelen bir kök oluşturma geçişi vardır. Bunun dışında daha fazla geçiş olabilir.

Birden fazla oluşturma geçişi olasılığı, "oluşturma geçişi" adını açıklar. Her geçişin GPU'da birden fazla "geçiş" olarak sırayla yürütülmesi gerekir. Buna karşılık, tek bir geçiş tek bir büyük çaplı paralel GPU hesaplamasında tamamlanabilir.

Toplama

Viz'e birden fazla kompozitör çerçevesi gönderilir ve bunların ekrana birlikte çizilmesi gerekir. Bu, bunları tek bir birleştirilmiş kompozitör çerçevesine dönüştüren bir toplama aşamasıyla gerçekleştirilir. Toplama, yüzey çizme dörtgenlerini belirttikleri kompozitör çerçeveleriyle değiştirir. Gereksiz ara dokuları veya ekran dışındaki içerikleri optimize etmek için de bir fırsattır. Örneğin, çoğu durumda siteye özel bir iframe için birleştirici çerçevenin kendi ara dokusuna ihtiyacı yoktur ve uygun çizim dörtgenleri aracılığıyla doğrudan çerçeve arabelleğine çizilebilir. Toplama aşaması, bu tür optimizasyonları belirler ve bunları tek tek oluşturma derleyicilerinin erişemediği genel bilgilere göre uygular.

Örnek

Bu makalenin başındaki örneği temsil eden birleştirici çerçeveleri aşağıda bulabilirsiniz.

  • foo.com/index.html yüzeyi: id=0
    • Oluşturma geçişi 0: Çıktıya çizim.
      • Oluşturma geçişi dörtgen çizme: 3 piksel bulanıklıkla çizin ve 0. oluşturma geçişine kırpın.
        • Oluşturma kartı 1:
          • #one iFrame'sinin karo içerikleri için her biri x ve y konumlarına sahip dörtgenler çizin.
      • Yüzey çizim dörtlü: Kimlik 2 ile çizilmiş ölçek ve çeviri dönüşümü.
  • Tarayıcı kullanıcı arayüzü yüzeyi: ID=1
    • Oluşturma geçişi 0: Çıktıya çizim.
      • Tarayıcı kullanıcı arayüzü için dörtgenler çizme (döşeme de dahil)
  • bar.com/index.html yüzeyi: ID=2
    • Oluşturma geçişi 0: Çıktıya çizim.
      • #two iFrame'inin içeriği için her biri x ve y konumlarına sahip dörtgenler çizin.

Resimler: Una Kravets.