renderNG mimarisi

Chris Harrelson

Burada RenderingNG bileşen parçalarının nasıl ayarlandığını ve oluşturma ardışık düzeninin bunların içinden nasıl geçtiğini göreceksiniz.

En üst düzeyden başlayarak oluşturma görevleri şunlardır:

1. Ekrandaki pikselleri içerik olarak oluşturma.
2. İçeriklerdeki görsel efektleri canlandırın.
3. Girişe yanıt olarak kaydır.
4. 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çerik, 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
• Kanvaslar
• 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 ayrılı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ı

Oklar, her aşamanın giriş ve çıkışlarını gösterir. Aşamalar, hangi iş parçacığını veya süreci çalıştırdıklarını göstermek için renkle belirtilir. Bazı durumlarda, aşamalar duruma bağlı olarak birden fazla yerde yürütülebilir. Bu nedenle bazı aşamaların iki rengi vardır. Yeşil aşamalar oluşturma işleminin ana iş parçacığıdır; sarılar oluşturma işleminin derleyicileridir; turuncu aşamalar ise görselleştirme işlemidir.

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. Yapılar, aşamaların girdi veya çıktıları olan veri yapılarıdır.

Aşamalar:

1. Animasyon: Hesaplanmış stilleri değiştirin ve beyansal zaman çizelgelerine göre zaman içinde mülk ağaçlarını değiştirin.
2. Stil: DOM'a CSS uygulayın ve hesaplanmış stiller oluşturun.
3. Düzen: Ekrandaki DOM öğelerinin boyutunu ve konumunu belirleyip sabit parça ağacını oluşturun.
4. Önceden boyama: Mülk ağaçlarını hesaplayın ve uygun olduğunda mevcut görüntü listelerini ve GPU doku karolarını invalidate.
5. Kaydırma: Özellik ağaçlarını değiştirerek dokümanların ve kaydırılabilir DOM öğelerinin kaydırma ofsetini güncelleyin.
6. Boya: DOM'dan GPU doku karolarının nasıl rasterleneceğini açıklayan bir görüntü listesi hesaplayın.
7. Taahhüt et: Mülk ağaçlarını ve görüntüleme listesini, oluşturucu iş parçacığına kopyalayın.
8. Katmanlara ayırma: Bağımsız rasterleştirme ve animasyon için görüntü listesini birleştirilmiş katman listesine ayırın.
9. Raster, kod çözme ve boya iş akışları: sırasıyla ekran listelerini, kodlanmış resimleri ve boyama iş akışı kodunu GPU doku karolarına dönüştürün.
10. Etkinleştir: GPU karolarının ekranda nasıl çizileceğini ve konumlandırılacağını, görsel efektlerle birlikte gösteren bir birleştirici çerçeve oluşturun.
11. Toplama: Tüm görünür kompozisyon çerçevelerindeki kompozisyon çerçevelerini tek bir global kompozisyon çerçevesinde birleştirir.
12. Ç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ı, düzeni, ön boyamayı ve boyamayı atlayabilir. Bu nedenle, animasyon ve kaydırma diyagramda sarı ve yeşil noktalarla işaretlenir. Düzen, ön boyama ve boyama, görsel efektler için atlanabiliyorsa tamamen birleştirici iş parçacığı üzerinde ç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 iş parçacığı yapısı

Not: Chromium mimarisinde bu belgede gösterilenden daha fazla CPU işlemi ve iş parçacığı vardır. Bu diyagramlar yalnızca oluşturma açısından kritik öneme sahiptir.

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.

• Oluşturma işlemi, tek bir site ve sekme kombinasyonu için girişi oluşturur, canlandırır, kaydırır ve yönlendirir. Birkaç oluşturma işlemi vardır.
• Tarayıcı işlemi, tarayıcı kullanıcı arayüzü için girişleri (adres çubuğu, sekme başlıkları ve simgeler dahil) oluşturur, canlandırır, yönlendirir ve kalan tüm girişi uygun oluşturma işlemine yönlendirir. Bir tarayıcı işlemi vardır.
• Görselleştirme işlemi, birden fazla oluşturma işleminin yanı sıra tarayıcı işleminden gelen birleştirmeyi toplar. GPU'yu kullanarak rasterleştirir ve çizer. Tek bir Viz süreci vardır.

Farklı siteler her zaman farklı oluşturma işlemlerine sahip olur.

Not: Gerçekte bu durum masaüstünde her zaman, mobilde ise yalnızca mümkün olduğunda geçerlidir. Bu uyarı, proje boyunca geçerlidir.

Aynı sitenin birden fazla tarayıcı sekmesi veya penceresi genellikle farklı oluşturma işlemlerine girer. Bunun istisnası, sekmelerin birbiriyle ilişkili olması (ör. birinin diğerini açması) durumudur. Masaüstünde güçlü bir bellek baskısı altındayken Chromium, aynı sitedeki birden fazla sekmeyi, ilişkili olmasalar bile aynı oluşturma işlemine yerleştirebilir.

Tek bir tarayıcı sekmesinde, farklı sitelere ait çerçeveler her zaman birbirinden farklı oluşturma işlemlerinde olur. Ancak aynı sitedeki kareler her zaman aynı oluşturma işlemindedir. Oluşturma açısından bakıldığında, birden fazla oluşturma işleminin önemli avantajı, siteler arası iframe'lerin ve sekmelerin birbirinden performans yalıtımı sağlamasıdır. Ayrıca, kaynaklar daha da fazla izolasyonu etkinleştirebilir.

Genellikle çizim yapılacak yalnızca bir GPU ve ekran olduğundan Chromium'un tamamı için tam olarak bir Viz işlemi vardır.

Viz'i kendi işlemine ayırmak, GPU sürücülerindeki veya donanımdaki hatalara karşı kararlılık açısından iyidir. Ayrıca Vulkan gibi GPU API'leri ve genel olarak güvenlik için önemli olan güvenlik yalıtımı için de idealdir.

Tarayıcının çok sayıda sekmesi ve penceresi olabilir ve bunların hepsinin çizilecek tarayıcı kullanıcı arayüzü pikseli vardır. Bu nedenle, neden tam olarak bir tarayıcı işlemi olduğunu merak edebilirsiniz. Bunun nedeni, aynı anda bunlardan yalnızca birine odaklanmasıdır. Aslında, görünmez olmayan tarayıcı sekmeleri çoğunlukla devre dışı bırakılır ve GPU belleğinin tamamı atlanır. Bununla birlikte, karmaşık tarayıcı kullanıcı arayüzü oluşturma özellikleri, oluşturma işlemlerinde (WebUI olarak bilinir) giderek daha fazla uygulanmaktadır. Bunun nedeni performans izolasyonu değil, Chromium'un web oluşturma motorunun kullanım kolaylığından yararlanmaktır.

Eski Android cihazlarda, oluşturma ve tarayıcı işlemi bir WebView'de kullanıldığında paylaşılır (bu durum genellikle Android'deki Chromium için değil, yalnızca WebView için geçerlidir). Web Görünümü'nde tarayıcı işlemi, yerleştiren uygulamayla da paylaşılır ve Web Görünümü'nde yalnızca bir oluşturma işlemi vardır.

Bazen, korunan video içeriğinin kodunu çözmek için bir yardımcı program işlemi de vardır. Bu işlem önceki şemalarda gösterilmemiştir.

Sohbetler

İş parçacıkları, yavaş görevlere, ardışık düzen paralelleştirmeye ve çoklu arabelleğe rağmen performans izolasyonu ve duyarlılığa ulaşmanıza yardımcı olur.

• Ana iş parçacığı; komut dosyalarını, oluşturma etkinliği döngüsünü, doküman yaşam döngüsünü, isabet testini, komut dosyası etkinliği dağıtımını ve HTML, CSS ve diğer veri biçimlerinin ayrıştırılmasını çalıştırır.
  • Ana iş parçacığı yardımcıları, kodlama veya kod çözme gerektiren resim bitmap'leri ve blob'lar oluşturma gibi görevleri gerçekleştirir.
  • Web İşleyiciler, komut dosyasını çalıştırır ve OffscreenCanvas için bir oluşturma etkinliği döngüsü sağlar.
• Birleştirici iş parçacığı giriş etkinliklerini işler, web içeriğinin kaydırma ve animasyonlarını gerçekleştirir, web içeriğinin optimum katmanlaşmasını hesaplar ve görüntü kod çözme işlemlerini, boyama iş uygulamalarını ve kafes görevlerini koordine eder.
  • Oluşturucu iş parçacığı yardımcıları, Viz raster görevlerini koordine eder ve resim kod çözme görevlerini yürütür, çalışma parçacıklarını ve yedek rasteri boyar.
• Medya, demuxer veya ses çıkışı iş parçacıkları, video ve ses akışlarının kodunu çözer, işler ve senkronize eder. (Videonun, ana oluşturma ardışık düzenine paralel olarak çalıştığını unutmayın.)

Ana ve birleştirici iş parçacıklarının ayrılması, animasyon ve ana iş parçacığı çalışmalarından kaydırmada performans izolasyonu açısından kritik öneme sahiptir.

Aynı sitedeki birden fazla sekme veya çerçeve aynı işleme dahil edilse bile oluşturma işlemi başına yalnızca bir ana iş parçacığı vardır. Ancak çeşitli tarayıcı API'lerinde gerçekleştirilen çalışmalardan performans izolasyonu vardır. Örneğin, Canvas API'de resim bitmap'lerinin ve blob'larının oluşturulması, ana iş parçacığı yardımcı iş parçacığında çalışır.

Benzer şekilde, oluşturma işlemi başına yalnızca bir birleştirici iş parçacığı vardır. Birleştirici iş parçacığındaki tüm gerçekten pahalı işlemler birleştirici çalışan iş parçacıklarına veya Viz işlemine atanmış olduğundan ve bu çalışma giriş yönlendirme, kaydırma veya animasyonla paralel olarak yapılabildiği için tek bir sorun olması genellikle soruna yol açmaz. Oluşturucu işleyici iş parçacıkları, Viz sürecinde çalıştırılan görevleri koordine eder ancak her yerde GPU hızlandırması, sürücü hataları gibi Chromium'un kontrolünün dışındaki nedenlerle başarısız olabilir. Bu durumlarda çalışan iş parçacığı, işi CPU'da yedek modda yapar.

Oluşturucu çalışan iş parçacıklarının sayısı, cihazın özelliklerine bağlıdır. Örneğin, masaüstü bilgisayarlar genellikle daha fazla CPU çekirdeğine sahip oldukları ve mobil cihazlara kıyasla daha az pil kısıtlamasına sahip oldukları için daha fazla iş parçacığı kullanır. Bu, ölçeği artırma ve azaltma örneğidir.

Oluşturma işlemi için iş parçacığı oluşturma mimarisi, üç farklı optimizasyon modelinin bir uygulamasıdır:

• Yardımcı mesaj dizileri: Ana mesaj dizisinin eşzamanlı diğer isteklere yanıt vermesini sağlamak için uzun süren alt görevleri ek mesaj dizilerine gönderir. Ana iş parçacığı yardımcısı ve derleyici yardımcısı iş parçacıkları bu tekniğin iyi örnekleridir.
• Çoklu arabelleğe alma: Oluşturma gecikmesini gizlemek için yeni içerik oluştururken daha önce oluşturulmuş içeriği gösterin. Oluşturucu iş parçacığı bu tekniği kullanır.
• İş akışı paralelleştirme: Oluşturma ardışık düzenini aynı anda birden fazla yerde çalıştırın. Kaydırma ve animasyon bu şekilde hızlı olabilir. Ana iş parçacığı oluşturma güncellemesi gerçekleşse bile, kaydırma ve animasyon birbirine paralel olarak çalışabilir.

Tarayıcı işlemi

• Oluşturma ve oluşturma iş parçacığı, tarayıcı kullanıcı arayüzündeki girişlere yanıt verir, diğer girişleri doğru oluşturma işlemine yönlendirir, tarayıcı kullanıcı arayüzünü düzenler ve boyar.
• Oluşturma ve oluşturma iş parçacığı yardımcıları, resim kod çözme görevlerini yürütür ve yedek raster veya kod çözme işlemini gerçekleştirir.

Tarayıcı işlemi oluşturma ve oluşturma iş parçacığı, ana iş parçacığı ve oluşturucu iş parçacığının tek bir iş parçacığında birleştirilmesi dışında bir oluşturma işleminin koduna ve işlevine benzer. Tasarım gereği uzun ana iş parçacığı görevleri olmadığından performansın uzun ana iş parçacığı görevlerinden izole edilmesine gerek olmadığı için bu durumda yalnızca bir iş parçacığı gerekir.

Viz işlemi

• GPU ana iş parçacığı, görüntü listelerini ve video karelerini GPU doku karolarına rasterleştirir ve ekrana kompozitör kareleri çizer.
• Görüntü oluşturma işleyicisi iş parçacığı, her oluşturma işleminin yanı sıra tarayıcı işleminden gelen oluşturma işlemlerini ekranda gösterilmek üzere tek bir oluşturma işleyicisi karesinde toplar ve optimize eder.

Kafes ve çizim genellikle aynı iş parçacığı üzerinde gerçekleşir, çünkü ikisi de GPU kaynaklarına bağlıdır ve GPU'nun çok iş parçacıklı kullanımının güvenilir bir şekilde yapılması zordur (GPU'ya daha kolay çok iş parçacıklı erişim, yeni Vulkan standardını geliştirmek için motivasyon oluşturur). WebView'ların yerel bir uygulamaya yerleştirilme biçimi nedeniyle Android WebView'da çizim için işletim sistemi düzeyinde ayrı bir oluşturma ileti dizisi vardır. Diğer platformlarda gelecekte bu tür bir ileti dizisi olması muhtemeldir.

Her zaman yanıt vermesi ve GPU ana iş parçacığında olası herhangi bir yavaşlama kaynağını engellememesi gerektiği için görüntü birleştirici farklı bir iş parçacığındadır. GPU ana iş akışındaki yavaşlamanın bir nedeni, tahmin edilmesi zor şekillerde yavaşlayabilecek tedarikçiye özgü GPU sürücüleri gibi Chromium dışı kodlara yapılan çağrılardır.

Bileşen yapısı

Her oluşturma işlemi ana veya oluşturucu iş parçacığında, birbiriyle yapılandırılmış şekillerde etkileşime geçen mantıksal yazılım bileşenleri bulunur.

Ana iş parçacığı bileşenlerini işleme

Blink Renderer'da:

• Yerel çerçeve ağacı parçası, yerel çerçevelerin ağacını ve çerçevelerdeki DOM'u temsil eder.
• DOM ve Canvas API'leri bileşeni, bu API'lerin tümünün uygulamalarını içerir.
• Belge yaşam döngüsü çalıştırıcı, taahhüt adımı da dahil olmak üzere oluşturma ardışık düzeni adımlarını yürütür.
• Giriş etkinliği isabet testi ve dağıtımı bileşeni, bir etkinlik tarafından hangi DOM öğesinin hedeflendiğini öğrenmek için isabet testleri yürütür ve giriş etkinliği dağıtma algoritmalarını ve varsayılan davranışları çalıştırır.

Oluşturma etkinliği döngüsü planlayıcısı ve çalıştırıcı, etkinlik döngüsünde nelerin ne zaman çalıştırılacağına karar verir. Oluşturma işlemini, cihaz ekranıyla eşleşen bir ritimde gerçekleşecek şekilde planlar.

Yerel çerçeve ağacı parçaları biraz karmaşıktır. Bir çerçeve ağacının, ana sayfa ve onun alt iframe'leri olduğunu hatırlayın. Bir kare, ilgili işlemde oluşturulduysa bu işleme yerel, aksi takdirde uzaktır.

Kareleri oluşturma süreçlerine göre renklendirebilirsiniz. Önceki resimde yeşil daireler, tek bir oluşturma işlemindeki tüm kareleri, turuncu daireler ikinci kareyi, mavi daire ise üçüncü kareyi temsil etmektedir.

Yerel çerçeve ağacı parçası, bir çerçeve ağacında aynı rengin bağlı bir bileşenidir. Resimde iki tane yerel çerçeve ağacı var: İkisi A sitesi, diğeri B sitesi için, diğeri de C sitesi için. Her yerel çerçeve ağacının kendi yanıp sönme oluşturucu bileşeni vardır. Yerel çerçeve ağacının Blink oluşturma aracı, diğer yerel çerçeve ağaçları ile aynı oluşturma sürecinde olabilir veya olmayabilir. Daha önce açıklandığı gibi, oluşturma işlemlerinin seçilme şekline göre belirlenir.

Oluşturma işlemi için birleştirici iş parçacığı yapısı

Oluşturma işlemi derleyici bileşenleri şunlardır:

• Birleştirilmiş katman listesi, görüntüleme listeleri ve mülk ağaçları tutan bir veri işleyici.
• Animasyon, kaydırma, birleştirme, kafes ile kod çözme ve oluşturma ardışık düzeninin adımlarını etkinleştiren bir yaşam döngüsü çalıştırıcısı. (Animasyon ve kaydırma işlemlerinin hem ana mesaj dizisinde hem de birleştiricide gerçekleşebileceğini unutmayın.)
• Giriş ve isabet testi işleyici, kaydırma hareketlerinin oluşturucu iş parçacığında çalışıp çalışamayacağını ve hangi oluşturma işlemi isabet testlerinin hedeflemesi gerektiğini belirlemek için giriş işlemeyi ve isabet testini birleştirilmiş katmanların çözünürlüğünde gerçekleştirir.

Uygulamadaki örnek mimari

Bu örnekte üç sekme vardır:

Sekme 1: foo.com

<html>
  <iframe id=one src="foo.com/other-url"></iframe>
  <iframe  id=two src="bar.com"></iframe>
</html>

Sekme 2: bar.com

<html>
 …
</html>

Sekme 3: baz.com html <html> … </html>

Bu sekmelerin işlemi, mesaj dizisi ve bileşen yapısı aşağıdaki gibidir:

Oluşturmayla ilgili dört ana görevden her biri için bir örnek inceleyelim. Hatırlatma:

1. İçerikleri ekranda piksel olarak oluşturma.
2. İçeriklerdeki görsel efektleri bir durumdan diğerine Animate olarak geçirin.
3. Girişlere yanıt olarak kaydırın.
4. Geliştirici komut dosyalarının ve diğer alt sistemlerin yanıt verebilmesi için girişi etkili bir şekilde doğru yerlere yönlendirin.

Değiştirilen DOM'u birinci sekme için oluşturmak üzere:

1. Bir geliştirici komut dosyası, foo.com için oluşturma işleminde DOM'u değiştirir.
2. Blink oluşturma aracı, birleştiriciye oluşturma işleminin yapılması gerektiğini söyler.
3. Oluşturucu, Viz'e oluşturma işleminin yapılması gerektiğini söyler.
4. Viz, oluşturma işleminin başladığını kompozitöre bildirir.
5. Oluşturucu, başlangıç sinyalini Blink oluşturma aracına iletir.
6. Ana iş parçacığı etkinlik döngüsü çalıştırıcı, belge yaşam döngüsünü çalıştırır.
7. Ana iş parçacığı, sonucu oluşturucu iş parçacığına gönderir.
8. Birleştirici etkinlik döngüsü çalıştırıcısı, birleştirme yaşam döngüsünü çalıştırır.
9. Tüm raster görevleri, raster için Viz'e gönderilir (genellikle bu görevlerden birden fazlası vardır).
10. Görselleştirme, GPU'da içeriği rasterler.
11. Viz, raster görevinin tamamlandığını onaylar. Not: Chromium genellikle rasterin tamamlanmasını beklemez ve bunun yerine 15. adım uygulanmadan önce raster görevleri tarafından çözülmesi gereken senkronizasyon jetonu adı verilen bir öğe kullanır.
12. Viz'e bir birleştirici çerçeve gönderilir.
13. Viz, foo.com oluşturma işlemi, bar.com iFrame oluşturma işlemi ve tarayıcı kullanıcı arayüzü için birleştirici çerçeveleri toplar.
14. Viz, çekiliş planlar.
15. Viz, birleştirilmiş kompozisyon çerçevesini ekrana çizer.

İkinci sekmede bir CSS dönüştürme geçişine animasyon uygulamak için:

1. bar.com oluşturma işleminin oluşturucu iş parçacığı, mevcut mülk ağaçlarını değiştirerek oluşturucu etkinlik döngüsünde bir animasyon işaretler. Ardından, karıştırıcı yaşam döngüsü yeniden çalıştırılır. (Raster ve kod çözme görevleri gerçekleşebilir ancak burada gösterilmez.)
2. Viz'e bir birleştirici çerçeve gönderilir.
3. Viz, foo.com oluşturma işlemi, bar.com oluşturma işlemi ve tarayıcı kullanıcı arayüzü için birleştirici çerçeveleri toplar.
4. Viz bir çekiliş planlıyor.
5. Viz, birleştirilmiş kompozisyon çerçevesini ekrana çizer.

Üçüncü sekmedeki web sayfasında kaydırma yapmak için:

1. Tarayıcı işlemine bir dizi input etkinliği (fare, dokunma veya klavye) gelir.
2. Her etkinlik, baz.com'un oluşturma işlemi derleyici iş parçacığına yönlendirilir.
3. Birleştirici, ana iş parçacığının etkinlik hakkında bilgi sahibi olması gerekip gerekmediğini belirler.
4. Etkinlik, gerekirse ana ileti dizisine gönderilir.
5. Ana iş parçacığı, işleyicilerin etkinlikte preventDefault çağırıp çağırmayacağını görmek için input etkinlik işleyiciyi (pointerdown, touchstar, pointermove, touchmove veya wheel) tetikler.
6. Ana mesaj dizisi, preventDefault'ün kompozitörde çağrılıp çağrılmadığını döndürür.
7. Aksi takdirde giriş etkinliği tarayıcı işlemine geri gönderilir.
8. Tarayıcı işlemi, bunu diğer son etkinliklerle birleştirerek kaydırma hareketine dönüştürür.
9. Kaydırma hareketi, baz.com'un oluşturma işlemi derleyici iş parçacığına tekrar gönderilir.
10. Kaydırma burada uygulanır ve bar.com oluşturma işleminin kompozitör iş parçacığı, kompozitör etkinlik döngüsünde bir animasyon işaretler. Bu işlem, mülk ağaçlarındaki kaydırma ofsetini değiştirir ve oluşturucu yaşam döngüsünü yeniden çalıştırır. Ayrıca ana iş parçacığına bir scroll etkinliği (burada gösterilmemiştir) tetiklemesini de söyler.
11. Viz'e bir birleştirici çerçeve gönderilir.
12. Viz, foo.com oluşturma işlemi, bar.com oluşturma işlemi ve tarayıcı kullanıcı arayüzü için birleştirici çerçeveleri toplar.
13. Viz bir çekiliş planlıyor.
14. Viz, birleştirilmiş kompozisyon çerçevesini ekrana çizer.

Not: Kaydırma işlemi zaten başladığından, ilk giriş etkinliğinden sonraki her giriş etkinliği üçüncü ve dördüncü adımları atlayabilir. Komut dosyaları, scroll etkinliği aracılığıyla bu işlemi gözlemleyebilir ancak kesintiye uğratamaz.

Birinci sekmedeki iki numaralı iFrame'deki bir köprü bağlantısında click etkinliğini yönlendirmek için:

1. Tarayıcı işlemine bir input etkinliği (fare, dokunma veya klavye) gelir. Bar.com iframe oluşturma işleminin tıklamayı alması gerektiğini belirlemek için yaklaşık bir isabet testi yürütür ve tıklamayı oraya gönderir.
2. bar.com için birleştirici iş parçacığı, click etkinliğini bar.com'un ana iş parçacığına yönlendirir ve bunu işlemek için bir oluşturma etkinliği döngüsü görevi planlar.
3. bar.com'un ana iş parçacığı isabet testleri için giriş etkinliği işleyici, iframe'daki hangi DOM öğesinin tıklandığını belirler ve komut dosyalarının gözlemlemesi için bir click etkinliği tetikler. preventDefault ifadesini duymayıp köprüye gider.
4. Köprünün hedef sayfası yüklendikten sonra, yeni durum önceki "oluşturma değiştirilen DOM" örneğine benzer adımlarla oluşturulur. (Bu müteakip değişiklikler burada gösterilmemiştir.)

Paket servis

Oluşturma işleminin nasıl çalıştığını hatırlamak ve anlamak çok zaman alabilir.

En önemli nokta, dikkatli bir şekilde modülerleştirilerek ve ayrıntılara özen gösterilerek oluşturulan oluşturma ardışık düzeninin, kendi kendine yeten bir dizi bileşene ayrılmış olmasıdır. Ardından bu bileşenler, ölçeklenebilir performans ve genişletilebilirlik fırsatlarını en üst düzeye çıkarmak için paralel işlemler ve iş parçacıkları arasında bölünmüştür.

Her bileşen, modern web uygulamalarının performansını ve özelliklerini desteklemede kritik bir rol oynar.

RenderingNG için kod bileşenleri kadar önemli olan anahtar veri yapıları hakkında okumaya devam edin.

---

Resimler: Una Kravets.