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

Şimdi ana veri yapılarına bakalım. Bunlar, sürece girdikleri giriş ve çıkışlardır. Ardışık düzen oluşturma hakkında daha fazla bilgi edinin.

Bu veri yapıları şunlardır:

  • Çerçeve ağaçları, farklı web sitelerini temsil eden yerel ve uzak düğümlerden ve Yanıp sönen oluşturucunun belgeleridir.
  • Sabit parça ağacı, algoritmasını kullanabilirsiniz.
  • Özellik ağaçları; dönüşüm, klip, efekt ve kaydırma hiyerarşilerini temsil eder. ekleyebilirsiniz. Bunlar ardışık düzende kullanılır.
  • Ekran listeleri ve boyama parçaları, kafes ve katmanlaştırma algoritmalarına yapılan girişlerdir.
  • Bileşik çerçeveler; yüzeyleri, oluşturma yüzeylerini ve GPU dokusunu içerir. dört farklı grafik öğesi seçin.

Bu veri yapılarını incelemeden önce aşağıdaki örnek, mimari incelemesinden biri olabilir. Bu örneği kullanılmıştır ve bu örnek, verilerin nasıl her şeyin nasıl işlediğini konuştuk.

<!-- 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 kaynaklar arası çerçeve oluşturmayı seçebilir farklı bir oluşturma sürecinde olması gerekir.

Örnek kodda toplam üç çerçeve vardır:

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

Chromium, site izolasyonu ile bu web sayfasını oluşturmak için iki oluşturma işlemi kullanır. Her oluşturma işlemi, söz konusu web sayfası için çerçeve ağacını temsil eder.

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

Farklı bir işlemde oluşturulan kare, uzak kare olarak temsil edilir. Uzak çerçeve, oluşturma işleminde yer tutucu işlevi görmek için gereken minimum bilgiyi içerir. göz önünde bulundurmanız gerekir. Aksi takdirde, uzak çerçeve gerçek içeriğini oluşturmak için gereken bilgileri içermez.

Öte yandan yerel bir kare, standarttan geçen bir kareyi ardışık düzeni oluşturur. Yerel çerçeve, öğenin çevrilmesi için gereken tüm bilgileri bu çerçeveye ait verileri (DOM ağacı ve stil verileri gibi) oluşturup görüntüleyebilirsiniz.

Oluşturma ardışık düzeni, web sitesinin ayrıntılarıyla local çerçeve ağaç parçası. Ana çerçeve olarak foo.com içeren daha karmaşık bir örneği değerlendirin:

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

Ayrıca şu bar.com alt çerçeve:

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

Sadece iki oluşturucu olsa da artık üç yerel kare vardır ağaç parçalarından, iki tanesi foo.com için, biri de bar.com için oluşturma işlemi:

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

Web sayfası için bir oluşturucu çerçevesi oluşturmak üzere Viz aynı anda her bir üç yerel çerçeve ağacı, birleştirir. Ayrıca birleştirici çerçeveleri bölümüne bakın.

foo.com ana çerçevesi ve foo.com/other-page alt çerçevesi aynı çerçeve ağacının parçasıdır ve aynı işlemde oluşturulur. Ancak iki çerçeve yine de bağımsız belge yaşam döngüleri parçası olan farklı yerel çerçeve ağacı parçalarına dahildir. Bu nedenle, tek bir güncellemede her ikisi için de tek bir birleştirici karesi oluşturulamaz. Oluşturma işleminde yeterli bilgi yok foo.com/other-page için oluşturulan birleştirici karesini birleştirmek amacıyla doğrudan foo.com ana çerçeve için birleştirici çerçevesine ekleyebilirsiniz. Örneğin, işlem dışı bar.com üst çerçevesi foo.com/other-url iframe'inin görüntülenmesini etkileyebilir, iframe'i CSS ile değiştirerek veya iframe'in bazı bölümlerini DOM'sindeki diğer öğelerle kapatarak.

Görsel mülk güncelleme şelalesi

Cihazın ö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 çerçeve ağacı parçasının kökü, kendisiyle ilişkilendirilmiş bir widget nesnesine sahiptir. Görsel özellik güncellemeleri, yayılmadan önce ana çerçevenin widget'ına gider yukarıdan aşağıya doğru kalan widget'lara geçelim.

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

Önceki metinde açıklanan işlemin şeması.

Bu süreç anlık değildir Bu nedenle, çoğaltılan görsel özellikler bir senkronizasyon jetonu da içerir. Viz birleştirici, tüm yerel çerçeve ağacı parçalarını beklemek için bu senkronizasyon jetonunu kullanır öğesini tıklayın. Bu işlem, birleştirici karelerinin farklı görsel özelliklerle karıştırılmasını önler.

Sabit parça ağacı

Sabit parça ağacı, oluşturma işleminin düzen aşamasının çıktısıdır ardışık düzendir. Sayfadaki tüm öğelerin konumunu ve boyutunu gösterir (dönüşümler uygulanmadan).

Her ağaçtaki parçaların, düzen gerektiren bir parça olarak işaretlenerek gösterimi.

Her parça, DOM öğesinin bir parçasını temsil eder. Genellikle öğe başına yalnızca bir parça bulunur, Ancak yazdırma sırasında farklı sayfalara bölünürse daha fazla çok sütunlu bir bağlamda hangi verilerin toplandığını gösterir.

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

  • Tüm "yukarı" öğelere izin ver referansları da gösterilir. (Çocuklar ebeveynlerine işaretçi bırakamaz.)
  • "balon" ayrıntılı veriler sunar. (çocuk sadece alt kuruluşlarındaki bilgileri okur, ebeveyninden gelen bilgileri okumaz).

Bu kısıtlamalar, bir parçayı sonraki düzen için yeniden kullanmamıza olanak tanır. Bu kısıtlamalar olmasaydı çoğu zaman ağacın tamamını yeniden oluşturmamız gerekirdi ve bu da oldukça maliyetli bir işti.

Çoğu düzen genellikle artımlı güncellemelerdir. Örneğin Kullanıcının bir öğeyi tıklamasına yanıt olarak 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çekte değişen öğelerle orantılı olarak çalışmalıdır. Bunu, önceki ağacın mümkün olduğunca çok sayıda bölümünü yeniden kullanarak başarabiliriz. Bu, (genellikle) yalnızca ağacın omurgasını yeniden inşa etmemiz gerektiği anlamına gelir.

Gelecekte, bu sabit tasarım sayesinde ilgi çekici şeyler yapabiliriz Örneğin, sabit parça ağacını iş parçacığı sınırlarından geçirmek gibidir. (farklı bir iş parçacığında sonraki aşamaları gerçekleştirmek için) düzgün bir düzen animasyonu için birden fazla ağaç oluşturabilir, veya paralel spekülatif düzenler kullanabilirsiniz. Ayrıca çoklu iş parçacıklı düzen potansiyelini de beraberinde getiriyor.

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

Satır içi içerik (Ağırlıklı olarak stilize edilmiş metin) biraz farklı bir temsil kullanır. Kutuların ve işaretçilerin yer aldığı bir ağaç yapısı yerine, satır içi içeriği, ağacı temsil eden düz bir liste halinde temsil ederiz. En önemli avantajı, satır içi reklamlar için düz liste gösteriminin hızlı olmasıdır. satır içi veri yapılarını incelemek veya sorgulamak için kullanışlıdır. verimli bir şekilde çalışır. Bu, web oluşturma performansı için son derece önemlidir. çok karmaşık bir işlem olduğu için, ve yüksek düzeyde optimize edilmediği sürece ardışık düzenin en yavaş kısmı haline gelebilir.

Düz liste her bir satır içi biçimlendirme bağlamı derinlik öncelikli arama sırasına göre düzenleyebilirsiniz. Listedeki her giriş, bir (nesne, alt öğe sayısı) kümesidir. Örneğin, şu DOM'yi ele alalım:

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

Satır "Hi" (Yüksek) arasına alınacak şekilde width özelliği 0'a ayarlanır. ve "orada" yazıyor.

Bu durum için satır içi biçimlendirme bağlamı bir ağaç olarak temsil edildiğinde, şöyle 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)
  • (Kutu <span>, 1)
  • ("Merhaba" diye mesaj gönder, 0)
  • (Çizgi kutusu, 3)
  • (Kutu <b>, 1)
  • ("Orada" metni, 0)
  • ("." metni, 0)

Bu veri yapısının birçok tüketicisi vardır: erişilebilirlik API'leri, ve şu gibi geometri API'lerini kullanabilirsiniz: getClientRects ve contenteditable. Her birinin farklı gereksinimleri vardır. Bu bileşenler, düz veri yapısına kullanım kolaylığı imleci üzerinden erişir.

İmleç MoveToNext, MoveToNextLine, CursorForChildren gibi API'lere sahiptir. Bu imleç gösterimi, birkaç nedenden dolayı metin içeriği için çok güçlüdür:

  • Derinlik öncelikli arama sırasında yineleme çok hızlıdır. Bu, 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ırmaktadır hızlı iterasyonlar ve bellek yerelliği sağlar.
  • Arama, örneğin bir web sitesini ziyaret ettiğinde gerekli olan, renkli bir resim oluşturuyor.
  • Alt öğe sayısını bilmek bir sonraki kardeşe geçmeyi hızlandırır (dizi uzaklığını bu sayıya göre artırmanız yeterlidir).

Mülk ağaçları

DOM, bir öğe ağacıdır (metin düğümleri de vardır) ve CSS, öğelere ekleyin.

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

  • Düzen: Düzen kısıtlama algoritmasına yapılan girişler.
  • Boya: Öğeyi boyama ve kafes oluşturma (ancak alt öğeleri değil).
  • Görsel: DOM alt ağacına uygulanan raster/çizim efektleri, filtreleme ve kırpma gibi işlemlerdir.
  • Kaydırma: eksene hizalı ve yuvarlanmış köşe kırpılan alt ağacın yerini alır.

Özellik ağaçları, görsel ve kaydırma efektlerinin DOM öğelerine nasıl uygulandığını açıklayan veri yapılarıdır. Bunlar şu tür soruları cevaplamanızı sağlar: nerede, ekrana göre, belirli bir DOM öğesiyse nasıl değiştiriyorsunuz? Görsel ve kaydırma efektleri uygulamak için hangi GPU işlemi dizisi kullanılmalıdır?

Web'deki görsel ve kaydırma efektleri, tüm ihtişamıyla çok karmaşıktır. Mülk ağaçlarının yaptığı en önemli şey, bu karmaşıklığı temsil eden tek bir veri yapısı oluşturabilirsiniz. aynı zamanda DOM ve CSS'nin kalan karmaşıklığını da ortadan kaldırır. Bu, birleştirme ve kaydırma için algoritmaları çok daha güvenle uygulamamıza olanak tanır. Özellikle:

  • Hataya açık olabilecek geometri ve diğer hesaplamalar tek bir yerde toplanabilir.
  • Mülk ağaçlarını oluşturma ve güncellemenin karmaşıklığı tek bir oluşturma ardışık düzeni aşamasında izole edilir.
  • Özellik 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. Böylece, bunları birçok kullanım alanında kullanabilirsiniz.
  • Ne kadar çok kullanım alanı olursa geometrinin temellerini oluşturmaktan daha fazla kazanç elde edebiliriz. kullanabilmeleri için birbirlerinin önbellek.

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 birleştirme / çizim stratejisi belirleme.
  • Ölçülüyor IntersectionObserver tıklayın.
  • Ekran dışı öğeler ve GPU doku blokları için işlem yapmaktan kaçının.
  • Boya ve kafesi etkili ve doğru şekilde geçersiz kılma.
  • Ölçülüyor layout Shift ve Core Web Vitals'taki largest Contentful Paint

Her web dokümanında 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ırmayı temsil eder. (Kaydırma dönüşümü, 2D dönüşüm matrisi olarak temsil edilir.) Klip ağacı, taşma klipleri: Efekt ağacı diğer tüm görsel efektleri temsil eder: opaklık, filtreler, maskeler, ve klip yolu gibi diğer klip türlerini destekler. Kaydırma ağacı, kaydırmayla ilgili bilgileri temsil eder. nasıl kaydırdığı gibi zincirlemek; birleştirici iş parçacığında kaydırma işlemi gerçekleştirmek için gereklidir. Özellik ağacındaki her düğüm, bir DOM öğesi tarafından uygulanan kaydırmayı veya görsel efekti temsil eder. Birden fazla etkisi varsa Aynı öğe için her ağaçta birden fazla özellik ağacı düğümü olabilir.

Her ağacın topolojisi, DOM'nin seyrek bir temsili gibidir. Örneğin, taşma kliplerine sahip üç DOM öğesi varsa üç klip ağacı düğümü olacaktır: Klip ağacının yapısı ve taşma klipleri arasındaki kapsayıcı blok ilişkisini kaldırın. Ağaçlar arasında da bağlantılar vardır. Bu bağlantılar göreli DOM hiyerarşisini belirtir. uygulamanın sırası ve dolayısıyla da uygulama sırası. Örneğin, bir DOM öğesindeki bir dönüşüm, filtre içeren başka bir DOM öğesinin altındaysa Elbette, dönüştürme işlemi filtreden önce uygulanır.

Her DOM öğesinin bir özellik ağacı durumu vardır: Bu, 4 unsurlu (dönüştürme, klip, efekt, kaydırma) en yakın üst öğe klibini gösteren ağaç düğümlerini dönüştürür ve etkiler. Bu çok kullanışlı bir yöntem çünkü bu bilgiler sayesinde kliplerin listesini tam olarak bildiğimiz için dönüşümleri ve efektleri, bu nesne için geçerli olan hangi sırada olduğunu anlatacağım. Bu bize belgenin ekrandaki yerini ve nasıl çizileceğini bildirir.

Örnek

(kaynak)

<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>

Yukarıdaki örnek için (girişteki örnekten biraz farklıdır) oluşturulan mülk ağaçlarının temel öğeleri şunlardır:

Özellik ağacındaki çeşitli öğelere örnek.

Listeleri ve boya parçalarını göster

Görüntü öğesi, alt düzey çizim komutları içerir (bkz. burada bulabilirsiniz) ile pikselleştirilebilen Skia. Görüntüleme öğeleri genellikle, kenarlık veya arka plan çizme gibi birkaç çizim komutuyla basittir. Boya ağacı yürüyüşü, düzen ağacı ve ilişkili parçalar üzerinde CSS boyama sırasında yinelenir bir görüntülü reklam öğesi listesi oluşturmak için.

Örneğin:

İçinde &quot;Merhaba dünya&quot; yazan mavi bir kutu bir çizgi ekleyin.

<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, aşağıdaki görüntüleme listesini oluşturur: Bu örnekte her hücre bir görüntülü reklam öğesidir:

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. drawRect, 80x18 boyutunda 8,8 konumunda ve yeşil renkte. 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ındaki mavi div öğesinden öncedir. ancak CSS boyama sırası, negatif z-endeksi mavi div boyanın yeşil div öğesinden önce (3. adım) (Adım 4.1). Görüntülü reklamlar genel olarak CSS boya siparişi spesifikasyonunun atomik adımlarına 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 görüntülü reklam ve satır içi metin için başka bir görüntüleme öğesine sahip olması gibi. Bu ayrıntı düzeyi, CSS boyama siparişi spesifikasyonunun tam karmaşıklığını temsil etmek için önemlidir. Örneğin:

Üzerinde kısmen gri bir kutu ve &quot;Merhaba dünya&quot; yazan 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ünümün arka planı Arka plandaki dil: #green Arka plandaki dil: #gray #green satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. drawRect, 80x18 boyutunda 8,8 konumunda ve yeşil renkte. drawRect, 8,16 konumunda 35x20 boyutunda ve gri renkte. Konumu 8,8 ve metni "Hello world" olan drawTextBlob.

Görüntülü reklam öğesi listesi saklanır ve sonraki güncellemeler tarafından yeniden kullanılır. Boya ağacı yürüyüşü sırasında bir düzen nesnesi değişmediyse görüntülenen öğeleri önceki listeden kopyalanır. Ek optimizasyon, CSS boyama siparişi spesifikasyonunun bir özelliğine dayanır: 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ına yer verilmemiş ve önceki listede bulunan görüntülü reklam öğeleri dizisinin tamamını kopyalar.

Boya ağacı yürüyüşünde mevcut mülk ağacı durumu korunur ve görüntülü reklam öğesi listesi "parçalar" aynı özellik ağacı durumunu paylaşan görüntülü reklam öğelerinin sayısı Bu, aşağıdaki örnekte gösterilmektedir:

Eğik turuncu bir kutu içeren 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
800x600 boyutunda ve beyaz renkli drawRect. drawRect, 0,0 konumunda 100x100 boyutunda ve pembe renkte. Konumu 0,0 ve metni "Merhaba dünya" olan drawTextBlob. drawRect, 0,0 konumunda 75x200 boyutunda ve turuncu renkte. drawTextBlob: Konum 0,0 ve "Düşüyorum" yazısı.

Bu durumda dönüşüm özelliği ağacı ve boya parçaları şu şekilde olacaktır (kısaca 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.

Boya parçalarının sıralı listesi, Bunlar, görüntülü reklam öğesi grupları ve bir özellik ağacı durumudur. oluşturma ardışık düzeninin katman oluşturma adımına yapılan girişlerdir. Boya parçalarının tam listesi tek bir birleştirilmiş katmanda birleştirilebilir ve birlikte pikselleştirilebilir, Ancak bu işlem, kullanıcı her kaydırdığında pahalı bir pikselleştirme işlemi gerektirir. Her boya parçası için birleştirilmiş bir katman oluşturulabilir ve tüm yeniden pikselleştirmeyi önlemek için ayrı ayrı pikselleştiriliyor. Ancak bu, GPU belleğinin hızla tüketilmesine neden oluyor. Katmanlaştırma adımı, GPU belleği arasında denge kurulması ve işler değiştiğinde maliyetlerin azaltılması gerekir. Parçaları varsayılan olarak birleştirmek yerine birleştirici iş parçacığında değişmesi beklenen özellik ağacı durumlarına sahip boya parçalarını birleştirmemek, örneğin birleştirici iş parçacığı kaydırması veya birleştirici iş parçacığı dönüştürme animasyonları gibi.

Yukarıdaki örnek, ideal olarak iki birleştirilmiş katman oluşturmalıdır:

  • Çizim komutlarını içeren 800x600 boyutunda birleştirilmiş bir katman:
    1. 800x600 boyutunda ve beyaz renkli drawRect
    2. 0,0 konumunda 100x100 boyutunda ve pembe renkte drawRect
  • Çizim komutlarını içeren 144x224 boyutunda birleştirilmiş bir katman:
    1. Konum 0,0 ve "Merhaba dünya" metniyle drawTextBlob
    2. çevir 0,18
    3. rotateZ(25deg)
    4. 0,0 konumunda 75x200 boyutunda ve turuncu renkte drawRect
    5. 0,0 konumu ve "Düşiyorum" metnini içeren drawTextBlob

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

Örneğin, önceki bölümde gördüğümüz altı tane boya parçası var. (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ı boya parçası): doküman kaydırma, doküman klibi, #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.

Birleştirme kareleri: yüzeyler, oluşturma yüzeyleri ve GPU doku karoları

Tarayıcı ve oluşturma işlemleri içeriğin pikselleştirilmesini yönetir. daha sonra, ekranda sunulmak üzere birleştirici karelerini Viz işlemine gönderin. Birleştirme çerçeveleri, rasterleştirilmiş içeriklerin nasıl birleştirileceğini temsil eder. ve GPU kullanarak verimli bir şekilde çizebilirsiniz.

Kartlar

Teoride, bir oluşturma işlemi veya tarayıcı işlemi birleştirici, pikselleri pikselleştirebilir görüntü alanının tam boyutunda tek bir doku oluşturun ve bu dokuyu Viz'e gönderin. Bunu görüntülemek için görüntü birleştiricinin pikselleri kopyalaması yeterlidir o tek dokudan çerçeve arabelleğinde uygun konuma (örneğin, ekran). Ancak bu birleştirici, tüm görüntü alanını yeniden pikselleştirmesi ve Viz'e yeni bir doku göndermesi gereken tek bir pikselden oluşur.

Bunun yerine, görüntü alanı karolara ayrılır. Ayrı bir GPU doku kutusu, her bir karoyu görüntü alanının bir kısmı için pikselleştirilmiş piksellerle destekler. Oluşturucu daha sonra her bir karoyu tek tek güncelleyebilir veya mevcut karoların ekrandaki konumunu değiştirin. Örneğin, bir web sitesini kaydırırken mevcut karoların konumu yükselir ve yalnızca ara sıra kayabilir sayfanın daha alt kısmındaki içerikler için yeni bir karonun pikselleştirilmesi gerekir.

Dört karo.
Bu resimde, dört karoyla güneşli bir günün görüntüsü gösterilmektedir. Bir kaydırma gerçekleştiğinde beşinci bir karo görünmeye başlar. Karolardan birinin tek rengi (gök mavisi), en üstte video ve iframe yer alıyor.

Dörtler ve yüzeyler

GPU doku karoları özel bir dört türüdür, Bu kategori, bir doku kategorisi veya başka bir kategorinin süslü ismidir. Dörtlü, giriş dokusunu tanımlar ve buna nasıl görsel efekt uygulayıp dönüştürüleceğini gösterir. Örneğin, normal içerik bloklarında karo ızgarasında x, y konumlarını gösteren bir dönüşüm bulunur.

GPU doku karoları.

Bu pikselleştirilmiş parçalar, dörtlülerin bir listesi olan oluşturma kartı içine yerleştirilir. Oluşturma geçişi herhangi bir piksel bilgisi içermez; bunun yerine, istenilen piksel çıkışını elde etmek için her bir dörtgenin nereye ve nasıl çizileceğine ilişkin talimatlar içeriyor. Her GPU doku bloğu için bir çizim dörtlü bulunur. Görüntü birleştiricisinin sadece dörtlü listesi aracılığıyla yinelemesi gerekir. ve her biri belirlenen görsel efektlerle çizilerek yapılabilir, oluşturmak için kullanılır. Oluşturma geçişi için çizim dörtlülerinin birleştirilmesi GPU'da verimli bir şekilde yapılabilir. çünkü izin verilen görsel efektler, doğrudan GPU özellikleriyle eşlenenler olacak şekilde özenle seçilmiştir.

Pikselleştirilmiş karoların dışında başka çizim dörtlüsü türleri de vardır. Örneğin, hiç doku tarafından desteklenmeyen düz renkli çizim dörtlüleri vardır, video veya tuval gibi karo olmayan dokular için doku çizim dörtlü.

Bir oluşturucu çerçevesinin başka bir birleştirici karesi yerleştirmesi de mümkündür. Örneğin, tarayıcı birleştirici, tarayıcının kullanıcı arayüzüyle bir birleştirici çerçevesi oluşturur. ve oluşturma birleştirici içeriğinin yerleştirileceği boş bir dikdörtgen. Diğer bir örnek ise siteden izole iFrame'lerdir. Bu yerleştirme işlemi yüzeyler aracılığıyla gerçekleştirilir.

Bir besteci, bir oluşturucu çerçevesi gönderdiğinde buna bir tanımlayıcı eşlik eder ve surface ID olarak adlandırılır ve diğer birleştirici çerçevelerin bunu referans olarak yerleştirmesine olanak tanır. Belirli bir yüzey kimliğiyle gönderilen en yeni birleştirici çerçevesi Viz tarafından depolanır. Daha sonra başka bir besteci karesi, yüzey çizim karesi Böylece Viz ne çizeceğini bilir. (Yüzey çizim dörtlüsünün, dokuları değil, yalnızca yüzey kimliklerini içerdiğini unutmayın.)

Orta düzey oluşturma biletleri

Filtre veya gelişmiş karışım modu gibi bazı görsel efektler bir ara dokuya iki veya daha fazla dörtlü çizilmesini gerektirir. Daha sonra ara doku, GPU'da (veya muhtemelen başka bir ara doku) bir hedef arabelleğe alınır, aynı anda uygulayabilirsiniz. Buna olanak tanımak için birleştirici karesi, aslında oluşturma geçişlerinin bir listesini içerir. Her zaman bir kök oluşturma geçişi vardır. sonda çizilir ve hedefi kare arabelleğine karşılık gelir. ve daha fazlası olabilir.

Birden fazla oluşturma geçişi olasılığı bu adı açıklar. "oluşturma kartı". Her kartın GPU'da sırayla, birden fazla "geçte" tek bir geçiş, devasa büyüklükteki paralel bir GPU hesaplamasıyla tamamlanabilir.

Toplama

Viz'e birden fazla birleştirici karesi gönderilir. ve ekrana çizilmeleri gerekir. Bu işlem, verileri tek bir forma dönüştüren toplama aşamasıyla gerçekleştirilir. birleşim çerçevesidir. Toplama işlemi, yüzey çizimi dörtlülerinin yerini, belirttikleri birleştirici karelerle değiştirir. Gereksiz ara dokuları veya ekran dışındaki içerikleri optimize etmek için de bir fırsattır. Örneğin, birçok durumda, siteden izole edilmiş bir iframe için birleştirici çerçevesi kendi ara dokusuna ihtiyaç duymaz. ve uygun çizim dörtlüleri aracılığıyla doğrudan çerçeve arabelleğine çizilebilir. Toplama aşamasında bu tür optimizasyonlar ve bunları her bir oluşturucu birleştirici tarafından erişilemeyen genel bilgilere dayanarak uygular.

Örnek

Örnekleri, bu gönderiyi takip edin.

  • foo.com/index.html yüzeyi: id=0
    • Oluşturma geçişi 0: Çıkış için çizim.
      • Oluşturma geçişi dörtlüsi: 3 piksel bulanıklaştırmayla çizim yapın ve oluşturma geçişi 0'a klip.
        • Oluşturma kartı 1:
          • Her biri x ve y konumu olmak üzere #one iframe'in karo içerikleri için dörtlüler ç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: Çıkış için çizim.
      • Tarayıcı kullanıcı arayüzü için dörtlü çizin (ayrıca karolara ayrılmış)
  • bar.com/index.html yüzeyi: Kimlik=2
    • Oluşturma geçişi 0: Çıkış için çizim.
      • Her biri x ve y konumları olmak üzere #two iframe içeriği için dörtlüler çizin.

Çizimler: Una Kravets.