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.
- Özellik ağaçları, bir web dokümanının dönüştürme, klip, efekt ve kaydırma hiyerarşilerini temsil eder. 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.
- Birleştirici çerçeveler, GPU'yu kullanarak çizim yapmak için kullanılan yüzeyleri, oluşturma yüzeylerini ve GPU doku parçalarını içerir.
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, bu belgenin tamamında veri yapılarının buna nasıl uygulanacağına dair gösterimlerle birlikte kullanılmıştı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 üst çerçevesinden farklı bir oluşturma işleminde kaynaklar arası çerçeve oluşturmayı seçebilir.
Örnek kodda toplam üç çerçeve vardır:
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.
Farklı bir işlemde oluşturulan kare, uzak kare olarak temsil edilir. Uzak çerçeve, oluşturma işleminde bir yer tutucu görevi görmek için gereken minimum bilgileri (örneğin, boyutları) içerir. Aksi takdirde, uzak çerçeve gerçek içeriğini oluşturmak için gereken bilgileri 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, söz konusu çerçeveye ait verileri (DOM ağacı ve stil verileri gibi) oluşturulabilecek ve 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 bir çerçeve ağaç parçasının ayrıntı düzeyinde çalışır.
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>
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:
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. 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 bir parçasıdır ve aynı işlemde oluşturulur.
Bununla birlikte, iki çerçeve farklı yerel çerçeve ağacı parçalarının parçası oldukları için hâlâ bağımsız belge yaşam döngülerine sahiptir.
Bu nedenle, tek bir güncellemede her ikisi için de tek bir birleştirici karesi oluşturulamaz.
Oluşturma işlemi, foo.com/other-page
için oluşturulan birleştirici çerçeveyi doğrudan foo.com
ana çerçevenin birleştirici çerçevesine birleştirmek için yeterli bilgiye sahip değil.
Örneğin, işlem dışı bar.com
üst çerçevesi, iframe'i CSS ile dönüştürerek veya iframe'in bazı bölümlerini DOM'sindeki 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 çerçeve ağacı parçasının kökü, kendisiyle ilişkilendirilmiş bir widget nesnesine sahiptir. Görsel özellik güncellemeleri, kalan widget'lara yukarıdan aşağıya doğru uygulanmadan önce ana çerçevenin widget'ına gider.
Örneğin, görüntü alanı boyutu değiştiğinde:
Bu işlem anlık olmadığından çoğaltılan görsel özellikler de senkronizasyon jetonu içerir. Viz birleştirici, tüm yerel çerçeve ağacı parçalarının geçerli senkronizasyon jetonuyla bir birleştirici çerçevesi göndermesini beklemek için bu senkronizasyon jetonunu kullanır. 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 ardışık düzeninin düzen aşamasının çıktısıdır. Sayfadaki tüm öğelerin konumunu ve boyutunu temsil eder (dönüşümler uygulanmadan).
Her parça, DOM öğesinin bir parçası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ürse 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 uyguluyoruz. Yapmadıklarımız:
- Ağaçta tüm "yukarı" referanslara izin ver. (Çocuklar ebeveynlerine işaretçi bırakamaz.)
- "baloncuk" verilerini kullanarak (çocuk ebeveyninden değil, yalnızca kendi alt kuruluşlarından gelen bilgileri okur).
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, gerekirse sabit parça ağacını iş parçacığı sınırlarından geçirmek (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şturmak veya paralel kurgusal düzenler uygulamak gibi ilginç şeyler yapabilmemizi sağlayabilir. 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 ve işaretçiler içeren bir ağaç yapısı yerine, satır içi içeriği, ağacı temsil eden düz bir liste halinde sunuyoruz. En önemli avantajı, satır içi reklamlar için düz liste gösteriminin hızlı olması, satır içi veri yapılarını incelemek ya da sorgulamak için kullanışlı olması ve bellek verimli olmasıdır. Metin oluşturmak çok karmaşık bir işlem 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 işlem web oluşturma performansı için 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ında derinlik öncelikli arama sırasına göre oluşturulur. 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 "Yüksek" ve "orada" arasında olacak şekilde width
özelliği 0 değerine 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)
- (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 getClientRects
ile contenteditable
gibi geometri API'leri.
Her birinin farklı gereksinimleri vardır.
Bu bileşenler, düz veri yapısına kullanım kolaylığı imleci üzerinden erişir.
İmleç'te MoveToNext
, MoveToNextLine
, CursorForChildren
gibi API'ler bulunur.
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ırarak hızlı iterasyonlar ve bellek konumu sağlar.
- Örneğin, bir çizginin arka planını ve satır içi kutuları boyarken gerekli olan, kapsamlı arama olanağı sağlar.
- Alt öğelerin sayısını bilmek bir sonraki eşdüzey öğeye geçmeyi hızlandırır. (Dizi uzaklığını bu sayıya göre artırmanız yeterlidir).
Mülk ağaçları
DOM, öğelerden (ve metin düğümlerinden) oluşan bir ağaçtır. CSS, öğelere çeşitli stiller uygulayabilir.
Bu dört şekilde görünür:
- Düzen: Düzen kısıtlama algoritmasına yapılan girişler.
- Boya: Öğenin nasıl boyanacağı ve kafesleneceği (ancak alt öğelerinin değil).
- Görsel: DOM alt ağacına uygulanan dönüştürme, filtre ve kırpma gibi kafes/çizim efektleri.
- Kaydırma: yer alan alt ağacın eksene göre hizalı ve yuvarlatılmış köşe kaydırması ve kaydırılması.
Özellik ağaçları, görsel ve kaydırma efektlerinin DOM öğelerine nasıl uygulandığını açıklayan veri yapılarıdır. Düzen boyutu ve konumu dikkate alındığında ekrana göre belirli bir DOM öğesi nerede? 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. Dolayısıyla özellik ağaçlarının yaptığı en önemli şey, bu karmaşıklığı, yapılarını ve anlamlarını hassas bir şekilde temsil eden tek bir veri yapısına dönüştürürken aynı zamanda DOM ve CSS'nin diğer karmaşıklığını da ortadan kaldırmaktı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üncelleme işlemlerinin karmaşıklığı, tek bir oluşturma ardışık düzeni aşamasında birbirinden bağımsızdır.
- Ö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, birçok kullanım alanında kullanılabilirler.
- Ne kadar çok kullanım alanı olursa birbirlerinin önbelleklerini yeniden kullanabildikleri için temel olarak oluşturulmuş geometri önbelleğe alma işlemiyle daha 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 birleştirme / çizim stratejisi belirleme.
- IntersectionObserver geometrisinin ölçümü.
- 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.
- Core Web Vitals'da layout Shift ve Largest Contentful Paint ölçümü.
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 kliplerini temsil eder. Efekt ağacı diğer tüm görsel efektleri temsil eder: opaklık, filtreler, maskeler, karıştırma modları ve klip yolu gibi diğer klip türleri. Kaydırma ağacı, zincirin birlikte nasıl kaydırıldığı gibi kaydırmayla ilgili bilgileri temsil eder; birleştirici iş parçacığında kaydırma yapmak için bu 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 bir 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ü 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 bir özellik ağaç durumu vardır. Bu durum, söz konusu öğe üzerinde etkili olan en yakın üst öğe klibini, dönüşümü ve efekt ağacı düğümlerini belirten 4 unsurlu bir (dönüştürme, klip, efekt, kaydırma) durumudur. Bu çok kullanışlıdır 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 özellik ağaçlarının temel öğelerini burada görebilirsiniz:
Listeleri ve boya parçalarını göster
Görüntülü reklam öğesi, Skia ile pikselleştirilebilen düşük seviyeli ç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ı, bir görüntülü reklam öğesi listesi oluşturmak için düzen ağacı ve CSS boyama sırasını takip eden ilişkili parçalar üzerinde yinelenir.
Örneğin:
<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ülü reklam öğ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 . |
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'den öncedir ancak CSS boyama sırası, negatif z-endeksi mavi div'in yeşil div'den (adım 3) önce boyanmasını gerektirir (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, #green'in arka plan için bir görüntüleme öğesine, satır içi metin için de başka bir görüntüleme öğesine sahip olması gibi birden fazla görüntüleme öğesiyle sonuçlanabilir. Bu ayrıntı düzeyi, CSS boyama siparişi spesifikasyonunun tam karmaşıklığını (ör. negatif marjla oluşturulan boşluk bırakma) temsil etmek için önemlidir:
<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ü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.
Geçerli özellik ağacı durumu, boya ağacı yürüyüşü sırasında korunur ve görüntülü reklam öğesi listesi, aynı özellik ağacı durumunu paylaşan görüntülü reklam öğelerinin "parçaları" halinde gruplandırılır. Bu, aşağıdaki örnekte gösterilmektedir:
<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):
Görüntüleme öğesi grupları ve özellik ağacı durumu olan boyama parçalarının sıralı listesi, oluşturma ardışık düzeninin katman oluşturma adımına yapılan girişlerdir. Boya parçaları listesinin tamamı tek bir birleşik katmanda birleştirilebilir ve birlikte pikselleştirilebilir. Ancak bu, kullanıcının her kaydırışı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ştirilebilir. Ancak bu durumda GPU belleği hızla tüketilir. 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, 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.
Yukarıdaki örnek, ideal olarak iki birleştirilmiş katman oluşturmalıdır:
- Çizim komutlarını içeren 800x600 boyutunda birleştirilmiş bir katman:
- 800x600 boyutunda ve beyaz renkli
drawRect
- 0,0 konumunda 100x100 boyutunda ve pembe renkte
drawRect
- 800x600 boyutunda ve beyaz renkli
- Çizim komutlarını içeren, 144x224 boyutunda birleştirilmiş bir katman:
- Konum 0,0 ve "Merhaba dünya" metniyle
drawTextBlob
- çevir 0,18
rotateZ(25deg)
- 0,0 konumunda 75x200 boyutunda ve turuncu renkte
drawRect
- 0,0 konumu ve "Düşiyorum" metnini içeren
drawTextBlob
- Konum 0,0 ve "Merhaba dünya" metniyle
Kullanıcı #scroll
sayfasını kaydırırsa ikinci birleştirilmiş katman taşınır ancak pikselleştirme gerekmez.
Örnekte, mülk ağaçlarıyla ilgili önceki bölümden altı tane boya parçası bulunuyor. (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, ardından birleştirici kareleri ekranda sunulmak üzere 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. Bununla birlikte, bu oluşturucu tek bir pikseli bile güncellemek isterse tam görüntü alanını yeniden pikselleştirmek ve Viz'e yeni bir doku göndermesi gerekir.
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 blokları tek tek güncelleyebilir veya hatta sadece 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.](https://developer.chrome.com/static/docs/chromium/renderingng-data-structures/image/four-tiles-b115857a2f73.jpg?authuser=6&hl=tr)
Dörtler ve yüzeyler
GPU doku blokları, bir doku kategorisi veya başka bir kategori için süslü bir isim olan özel bir dört türüdür. 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.
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örtlüsün nerede ve nasıl çizileceğine ilişkin talimatlar içerir. Her GPU doku bloğu için bir çizim dörtlü bulunur. Görüntü birleştiricinin, oluşturma geçişi için istenen piksel çıkışını üretmek amacıyla dörtlü listesi aracılığıyla her birini belirtilen görsel efektlerle çizmesi yeterlidir. İzin verilen görsel efektler, doğrudan GPU özellikleriyle eşlenenler olacak şekilde özenle seçildiğinden, oluşturma geçişi için çizim dörtlülerinin birleştirilmesi GPU'da verimli bir şekilde yapılabilir.
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üsleri veya video ya da tuval gibi karo olmayan dokular için doku çizim dörtlüsü vardır.
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ı 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. 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 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. Başka bir birleştirme çerçevesi daha sonra bu çerçeveye bir yüzey çizim dörtgeni ile başvurabilir ve 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
Birçok filtre veya gelişmiş karıştırma modları gibi bazı görsel efektler, ara dokuya iki veya daha fazla dörtlü çizilmesini gerektirir. Daha sonra ara doku, görsel efekt aynı anda uygulanarak GPU'da (veya muhtemelen başka bir ara doku) hedef arabelleğe alınır. Buna olanak tanımak için birleştirici karesi, aslında oluşturma geçişlerinin bir listesini içerir. Her zaman, en son çekilen ve hedefi kare arabelleğine karşılık gelen bir kök oluşturma geçişi bulunur ve daha fazlası 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 sıralı olarak, birden fazla "geçişte" yürütülmesi gerekir. Bununla birlikte, tek bir geçiş, çok büyük paralel olan tek bir GPU hesaplamasıyla tamamlanabilir.
Toplama
Birden çok birleştirici karesi Viz'e gönderilir ve bunların ekrana birlikte çizilmesi gerekir. Bu işlem, modelleri tek bir toplu birleştirici çerçevesine dönüştüren bir toplama aşamasıyla gerçekleştirilir. 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'in oluşturucu çerçevesinin kendi ara dokusuna ihtiyacı yoktur ve uygun çizim dörtlüleri aracılığıyla doğrudan çerçeve arabelleğine çizilebilir. Toplama aşamasında bu optimizasyonlar belirlenir ve oluşturma birleştiriciler tarafından erişilemeyen küresel bilgilere dayanarak optimizasyon yapılır.
Örnek
Bu gönderinin başlangıcından itibaren örneği temsil eden birleştirici kareleri burada verilmiştir.
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.
- Her biri x ve y konumu olmak üzere
- Oluşturma kartı 1:
- Yüzey çizim dörtlü: Kimlik 2 ile çizilmiş ölçek ve çeviri dönüşümü.
- 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 geçişi 0: Çıkış için çizim.
- 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ış)
- Oluşturma geçişi 0: Çıkış için çizim.
bar.com/index.html
yüzeyi: ID=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.
- Her biri x ve y konumları olmak üzere
- Oluşturma geçişi 0: Çıkış için çizim.
Çizimler: Una Kravets.