renderNG mimarisi

Chris Harrelson
Chris Harrelson
X GitHub

Burada RenderingNG bileşeninin nasıl çalıştığını bileşenlerinin nasıl ayarlandığını ve oluşturma ardışık düzeninin bunların içinden nasıl geçtiğini belirleyin.

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

  1. İçerikleri ekranda pikseller halinde oluşturun.
  2. İçerikteki görsel efektler durumundan diğerine geçiş yapı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 yönlendirin.

Oluşturulacak içerik, her tarayıcı sekmesi için bir çerçeve ağacı ve kullanıcı arayüzü. Dokunmatik ekranlardan ham giriş etkinlikleri akışı, fare, klavye ve diğer donanım cihazlarıdır.

Her karede şunlar bulunur:

  • 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ı sekmesinde yüklenen bir web sayfasının üst düzey bir çerçevesi vardır. üst düzey dokümanda yer alan her iframe için alt çerçeveler ve bunların yinelemeli iframe alt öğeleridir.

Görsel efekt, bir bit eşlete uygulanan grafiksel bir işlemdir. Örneğin kaydırma, dönüştürme, klip, filtre, opaklık veya karışım gibi ayarlar.

Mimari bileşenler

RenderingNG'de bu görevler birkaç aşamaya ve koda göre mantıksal olarak bölünür bileşenlerine ayıralım. Bileşenler çeşitli CPU işlemlerinde, iş parçacıklarında alt bileşenlerine de yer verebilirsiniz. Her biri projenin hedefine ulaşmak için güvenilirlik, ölçeklenebilir performans ve tüm web içerikleri için genişletilebilirlik.

Ardışık düzen yapısı oluşturma

Oluşturma ardışık düzeninin şeması.
Oklar, her aşamadaki giriş ve çıkışları gösterir. Aşamalar hangi iş parçacığı veya işlemi yürüttüklerini göstermek için renklerle belirtilir. İçinde Bazı durumlarda, aşamalar kullanım durumuna bağlı olarak, Bu nedenle bazılarının iki rengi vardır. Yeşil aşamalar oluşturma süreci ana iş parçacığı; sarı, oluşturma işlemi birleştiricileri; turuncu aşamalar viz sürecidir.

Oluşturma, çeşitli aşama ve yapılar oluşturulan bir ardışık düzende ilerler gerekiyor. Her aşama, projenin tamamlanması için gerekli olan tanımlanmış bir görev oluşturma. Yapılar veri yapılarıdır yani aşamaların girdileri veya çıktılarıdır.

Aşamalar şunlardır:

  1. Animasyon uygulama: Hesaplanan stilleri değiştirin ve özellik ağaçlarını bildirim temelli zaman çizelgelerine göre zaman içinde dönüştürün.
  2. Stil: DOM'ye CSS uygulayın ve hesaplanan stiller oluşturun.
  3. Düzen: Ekrandaki DOM öğelerinin boyutunu ve konumunu belirleyin. ve sabit parça ağacını oluşturun.
  4. Ön boyama: Compute mülkü ağaçları ve geçersiz kılma Mevcut ekran listelerini ve GPU doku parçalarını uygun şekilde kaldırın.
  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. Paint: GPU doku karolarının DOM'den nasıl kafesleneceğini açıklayan bir görüntüleme listesi hesaplayın.
  7. Kaydetme: Özellik ağaçlarını ve görüntüleme listesini birleştirici iş parçacığına kopyalayın.
  8. Katmanlaştırma: Bağımsız pikselleştirme ve animasyon için görüntüleme listesini birleştirilmiş katman listesine ayırın.
  9. Raster, kod çözme ve boyama iş akışları: sırasıyla ekran listelerini, kodlanmış resimleri ve boyama iş akışı kodunu GPU doku karoları.
  10. Etkinleştir: Tüm görsel efektlerle birlikte GPU karolarının ekrana nasıl çizileceğini ve konumlandırılacağını temsil eden bir birleşik karesi oluşturun.
  11. Birleştir: Tüm görünür birleştirici karelerindeki birleştirici karelerini tek bir genel birleştirici karesinde birleştirir.
  12. Çizim: Ekranda pikseller oluşturmak için GPU'da birleştirilmiş birleştirici karesini yürütün.

Oluşturma ardışık düzeninin aşamaları gerekli değilse atlanabilir. Örneğin, görsel efekt animasyonları ve kaydırma, düzeni atlayabilir, ön boyama ve boyama yapabilir. 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 oluşturucu iş parçacığında çalıştırılabilir ve ana iş parçacığı atlanabilir.

Tarayıcıda kullanıcı arayüzünün oluşturulması doğrudan burada gösterilmez. Aynı ardışık düzenin basitleştirilmiş bir sürümü olarak da düşünülebilir. (ve aslında uygulanması kodun büyük bir kısmını paylaşmaktadır). Video (doğrudan tasvir edilmez) genellikle karelerin kodunu GPU doku karolarına çözen bağımsız bir kodla oluşturulur ve çizim adımına takılır.

İşlem ve iş parçacığı yapısı

CPU işlemleri

Birden fazla CPU işleminin kullanılması, performans ve güvenlik izolasyonu sağlar veya tarayıcı durumu arasında geçiş yaparak Ayrıca GPU donanımına karşı kararlılık ve güvenlik izolasyonu.

CPU işlemlerinin çeşitli bölümlerini gösteren diyagram

  • Oluşturma işlemi, bir tek bir site ve sekme kombinasyonudur. Birçok içerik oluşturma işlemi vardır.
  • Tarayıcı işlemi, tarayıcı kullanıcı arayüzü için girişi oluşturur, canlandırır ve yönlendirir ve yönlendirir (adres çubuğu, sekme başlıkları ve simgeler dahil) ve kalan tüm rotalar girdiler. Bir tane tarayıcı işlemi vardır.
  • Viz işlemi, birden fazla oluşturma işleminden birleştirmeyi toplar. artı tarayıcı işlemi. GPU'yu kullanarak dilimleyip çizim yapar. Her biri 100'den az gösterim alan bir Viz işlemi olabilir.

Farklı siteler her zaman bir araya gelir farklı içerik oluşturma süreçlerinde kullanılır.

Aynı sitenin birden fazla tarayıcı sekmesi veya penceresi genellikle farklı bir oluşturma işlemiyle gider ilişkili olmadığı sürece (ör. sekmeler, açarak diğerini oluşturun. Masaüstünde güçlü bellek baskısı altında Chromium, birden fazla sekme yerleştirebilir aynı siteden aynı oluşturma işlemine gönderilmesini sağlar.

Tek bir tarayıcı sekmesinde, farklı sitelerdeki kareler her zaman birbirinden farklı oluşturma işlemlerindedir. 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 sekmeler performans yalıtımı sağlar bir şeyler öğrenme fırsatı sunar. Ayrıca, kaynaklar daha da fazla izolasyonu etkinleştirebilir.

Genellikle sadece tek bir Viz işlemi olduğundan Chromium'un tamamı için tam olarak bir Viz işlemi vardır. bir GPU ve ekran geliyor.

Viz'i kendi sürecine ayırmak, GPU sürücüleri veya donanımı. Güvenlik yalıtımı için de iyidir, Bu, dönüşüm izleme kodu gibi GPU API'leri için Vulkan ve genel olarak güvenlik.

Tarayıcıda çok sayıda sekme ve pencere olabileceğinden, hepsinde çizilecek tarayıcı kullanıcı arayüzü pikselleri var, diye merak edebilirsiniz: neden tam olarak bir tarayıcı işlemi var? Bunun nedeni, aynı anda yalnızca bir tanesine 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ını kaybeder. Bununla birlikte, karmaşık tarayıcı kullanıcı arayüzü oluşturma özellikleri giderek daha fazla uygulanmaktadır. olarak bilinir. WebUI). Bunun nedeni performans izolasyonu değildir, Chromium'un web oluşturma motorunun kullanım kolaylığından faydalanmak istiyorlar.

Daha eski Android cihazlarda, oluşturma ve tarayıcı işlemi, WebView'da kullanıldığında paylaşılır. (bu genellikle Android'deki Chromium için geçerli değildir, yalnızca WebView'da geçerlidir). WebView'da tarayıcı işlemi ayrıca yerleştirme uygulaması ile paylaşılır. ve WebView'da 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 bulunur. Bu işlem önceki diyagramlarda açıklanmamaktadır.

Sohbetler

İleti dizileri, yavaş görevlere rağmen performans yalıtımı oluşturmaya ve yanıt verme hızına yardımcı olur. ardışık düzen paralelleştirmesi ve çoklu arabelleğe alma gibi teknikler içerir.

Oluşturma işleminin şeması.

  • Ana iş parçacığı komut dosyalarını, oluşturma etkinliği döngüsünü, doküman yaşam döngüsünü isabet testi, komut dosyası etkinliği gönderme ve HTML, CSS ve diğer veri biçimlerini ayrıştırma.
    • Ana iş parçacığı yardımcıları, kodlama veya kod çözme gerektiren görüntü bit eşlemleri ve blob'ları oluşturma gibi görevleri gerçekleştirir.
    • Web Çalışanları komut dosyasını çalıştırmanız ve OffscreenCanvas için oluşturma etkinliği döngüsü kullanmanız gerekir.
  • Birleştirici iş parçacığı, giriş etkinliklerini işler. web içeriğinin kaydırmasını ve animasyonlarını gerçekleştirir. web içeriğinin optimum katmanlaşmasını hesaplar, ve kafes görevlerinin koordinasyonunu sağlar.
    • Birleştirici iş parçacığı yardımcıları Viz kafes görevlerini koordine eder, ve resim kod çözme görevlerini, boyama işletlerini ve yedek kafesleri yürütebilirsiniz.
  • Medya, demuxer veya ses çıkışı ileti dizileri kodu çözme, video ve ses akışlarını işlemek ve senkronize etmektir. (Videonun ana oluşturma ardışık düzenine paralel olarak yürütüldüğünü unutmayın.)

Ana ve birleştirici iş parçacıklarını ayırmak performans izolasyonu ana iş parçacığı çalışmasından kaydırmaya devam ediyor.

Oluşturma işlemi başına yalnızca bir ana iş parçacığı vardır. ancak aynı sitedeki birden fazla sekme veya çerçeve aynı işleme tabi olabilir. Bununla birlikte, çeşitli tarayıcı API'lerinde gerçekleştirilen çalışmalardan performans yalıtımı vardır. Örneğin, Canvas API'sinde resim bit eşlemleri ve blob'ları oluşturma işlemi bir ana iş parçacığı yardımcı iş parçacığında çalıştırılır.

Benzer şekilde, oluşturma işlemi başına yalnızca bir oluşturucu iş parçacığı bulunur. Genellikle tek bir sorun olması gerekmez, çünkü birleştirici iş parçacığındaki tüm çok pahalı birleştirici çalışan iş parçacıklarına veya Viz sürecine atanmıştır. ve bu çalışma giriş yönlendirme, kaydırma veya animasyonla paralel olarak yapılabilir. Birleştirici çalışan iş parçacıkları, Viz işleminde yürütülen görevleri koordine eder, ancak her yerde GPU hızlandırması Chromium'un kontrolü dışındaki nedenlerle başarısız olabilir, sorunları çözmenizi sağlar. Bu durumlarda çalışan iş parçacığı, işi CPU'da yedek modda yapar.

Birleştirici ç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 ileti dizisi kullanır. mobil cihazlara kıyasla daha fazla CPU çekirdeğine sahip oldukları ve pili daha az kullandıkları için Bu bir proje yöneticisinin ölçeğinizi artırmanız ve azaltmanız.

Oluşturma işlemi iş parçacığı mimarisi, üç farklı optimizasyon modelleri:

  • Yardımcı iş parçacıkları: Uzun süreli alt görevleri, muhafaza etmek için ek iş parçacıklarına gönderin. eş zamanlı diğer isteklere yanıt veren üst iş parçacığı. Ana iş parçacığı yardımcı ve birleştirici yardımcı ileti dizileri bu tekniğin iyi örnekleridir.
  • Birden çok arabelleğe alma: Yeni içerik oluştururken önceden oluşturulmuş içeriği göstermek için, oluşturma gecikmesi. Birleştirici iş parçacığı bu tekniği kullanır.
  • Ardışık düzende paralel yapma: Oluşturma ardışık düzenini birden fazla yerde çalıştırabilirsiniz. olanak tanır. Kaydırma ve animasyon bu kadar hızlı olabilir. hatta ana iş parçacığı oluşturma güncellemesi gerçekleşiyor, kaydırma ve animasyon yardımcı olur.

Tarayıcı işlemi

Oluşturma ve birleştirme iş parçacığı ile oluşturma ve iş parçacığı birleştirme yardımcısı arasındaki ilişkiyi gösteren tarayıcı işlem şeması.

  • Oluşturma ve birleştirme ileti dizisi, tarayıcı kullanıcı arayüzündeki girişe yanıt verir. diğer girişleri doğru oluşturma işlemine yönlendirir; tarayıcı kullanıcı arayüzünü ortaya koyar ve boyar.
  • Oluşturma ve birleştirme ileti dizisi yardımcıları ve yedek kafes ya da kod çözme görevlerini yürütebilir.

Tarayıcı işlemi ileti dizisini oluşturma ve birleştirme işlemi benzerdir kod ve işlevsellik açısından Ancak ana iş parçacığının ve birleştirici iş parçacığının tek bir iş parçacığı içinde birleştirilmesi gerekir. Bu durumda yalnızca bir ileti dizisi gerekir çünkü uzun ana iş parçacığı görevlerinden performans yalıtımı, çünkü tasarım gereği yoktur.

Viz işlemi

Viz işlemi, GPU ana iş parçacığını ve görüntü birleştirici iş parçacığını içerir.

  • GPU ana iş parçacığı kafesleri, listeleri ve video karelerini GPU doku karolarında gösterir. ve ekrana birleştirici çerçeveleri çiziyor.
  • Görüntülü reklam birleştirici ileti dizisi, her oluşturma işleminden birleştirmeyi toplar ve optimize eder. ekranda sunumu için tek bir birleşik çerçeve içinde birleştirmenize olanak sağlar.

Kafes ve çizim genellikle aynı iş parçacığında gerçekleşir, Çünkü ikisi de GPU kaynaklarına bağlı. Ayrıca GPU'nun çoklu iş parçacıklı kullanımının güvenilir (GPU'ya daha kolay çoklu iş parçacıklı erişim, yeni Vulkan standardı için geçerlidir). Android WebView'da, çizim için işletim sistemi düzeyinde ayrı bir oluşturma ileti dizisi Bunun nedeni, WebView'ların yerel uygulamalara yerleştirilme biçimidir. Diğer platformlarda gelecekte bu tür konular gündeme gelebilir.

Görüntü birleştirici, her zaman duyarlı olması gerektiğinden farklı bir iş parçacığında ve GPU ana iş parçacığında olası herhangi bir yavaşlama kaynağını engellememelidir. GPU ana iş parçacığındaki yavaşlamanın bir nedeni de Chromium dışı koda yapılan çağrılardır. Örneğin, tedarikçiye özel GPU sürücüleri gibi.

Bileşen yapısı

Her oluşturma işlemi ana veya birleştirici iş parçacığı içinde birbirleriyle yapılandırılmış şekillerde etkileşime giren mantıksal yazılım bileşenleri vardır.

Oluşturma işlemi ana iş parçacığı bileşenleri

Blink oluşturucunun şeması.

Blink Renderer'da:

  • Yerel çerçeve ağaç parçası, yerel çerçeve ağacını ve çerçeveler içindeki DOM'yi temsil eder.
  • DOM ve Canvas API'leri bileşeni, bu API'lerin tümünün uygulamalarını içerir.
  • Doküman yaşam döngüsü çalıştırıcı, oluşturma adımını kaydetme adımına kadar ve bu adım da dahil olmak üzere yürütür.
  • Giriş etkinliği isabeti test etme ve dağıtma bileşeni, isabet testlerini yürütür: bir etkinlik tarafından hangi DOM öğesinin hedeflendiğini ve giriş etkinliğini çalıştırdığını öğren daha iyi kavrayacaksınız.

Oluşturma etkinlik döngüsü planlayıcısı ve koşucusu, etkinlikte neyin çalıştırılacağına karar verir. nasıl yapılacağını göstereceğim. Oluşturmayı cihazla eşleşen bir tempoda gerçekleşecek şekilde programlar görüntüleyin.

Çerçeve ağacının diyagramı.

Yerel çerçeve ağacı parçaları biraz karmaşıktır. Çerçeve ağacının, yinelemeli olarak ana sayfa ve onun alt iframe'leri olduğunu unutmayın. Bir kare, bu işlemde oluşturulursa oluşturma işleminin yereldir. Aksi takdirde uzaktan çalışır.

Kareleri oluşturma sürecine göre renklendirebilirsiniz. Yukarıdaki resimde, yeşil dairelerin tümü tek bir oluşturma işlemindeki karelerdir; turuncu olanları saniye içinde, mavi olanları ise üçte bir saniyede.

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 bir kare ağacının Yanıp sönme oluşturucusu, aynı oluşturma işleminde olabilir veya olmayabilir neler yapabilirsiniz? Daha önce açıklandığı gibi, oluşturma işlemlerinin seçilme şekline göre belirlenir.

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

Oluşturma işlemi birleştirici bileşenlerini gösteren bir diyagram.

Oluşturma işlemi birleştirici bileşenleri şunları içerir:

  • Birleştirilmiş katman listesi, görüntü listeleri ve özellik ağaçlarını barındıran veri işleyici.
  • Animasyon, kaydırma, kompozit, kafes ve kafes etiketlerini çalıştıran bir yaşam döngüsü koşucusu kod çözme ve oluşturma ardışık düzeninin adımlarını etkinleştirme (Animasyon ve kaydırma işleminin hem ana iş parçacığında hem de birleştiricide gerçekleşebileceğini unutmayın.)
  • Bir giriş ve isabet test işleyici, birleştirilmiş katmanların çözünürlüğünde giriş işleme ve isabet testi gerçekleştirir. kaydırma hareketlerinin birleştirici iş parçacığında çalıştırılıp çalıştırılamayacağını belirlemek için ve hangi oluşturma işlemi isabet testlerinin hedeflemesi gerektiğini belirler.

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şlem, iş parçacığı ve bileşen yapısı aşağıdaki gibi görünür:

Sekmelere ilişkin işlemin şeması.

Oluşturmayla ilgili dört ana görevin her birini birer örnek üzerinden inceleyelim. Hatırlatma:

  1. İçerikleri ekranda pikseller halinde oluşturun.
  2. İçeriklerdeki görsel efektleri bir durumdan diğerine animasyon olarak kullanı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şi etkili bir şekilde doğru yerlere yönlendirin.

Birinci sekme için değiştirilen DOM'yi oluşturmak:

  1. Bir geliştirici komut dosyası, foo.com için oluşturma işlemindeki DOM'yi değiştirir.
  2. Yanıp sönme oluşturucu, birleştiriciye bir oluşturma işleminin gerçekleşmesi gerektiğini söyler.
  3. Birleştirici, Viz'e bir oluşturma işleminin gerçekleşmesi gerektiğini söyler.
  4. Viz, oluşturma işleminin başlangıcını birleştiriciye bildirir.
  5. Birleştirici, başlangıç sinyalini Blink oluşturucuya iletir.
  6. Ana iş parçacığı etkinlik döngüsü çalıştırıcısı, doküman yaşam döngüsünü çalıştırır.
  7. Ana iş parçacığı, sonucu birleştirici 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. Kafes görevleri, kafes için Viz'e gönderilir (genellikle bu görevlerden birden fazla vardır).
  10. İçeriği GPU'da raster haline getirir.
  11. Viz, kafes görevinin tamamlandığını onaylar. Not: Chromium genellikle kafesin tamamlanmasını beklemez. "Bunun yerine" senkronizasyon jetonu çözülmesi gereken önce kafes görevlere göre değiştirilir.
  12. Viz'e bir oluşturucu karesi gönderilir.
  13. Viz, foo.com oluşturma işlemi için birleştirici çerçeveleri toplar, bar.com iframe oluşturma işlemi ve tarayıcı kullanıcı arayüzü.
  14. Viz bir çekiliş planlıyor.
  15. Viz, birleştirilmiş birleştirici çerçevesini ekrana çizer.

İkinci sekmede bir CSS dönüşüm geçişini canlandırmak için:

  1. bar.com oluşturma işlemi için birleştirici iş parçacığı bir animasyonu işaret eder değiştirerek mevcut özellik ağaçlarını değiştirebilir. Bu işlem daha sonra birleştirici yaşam döngüsünü yeniden çalıştırır. (Raster ve kod çözme görevleri gerçekleşebilir ancak burada gösterilmemiştir.)
  2. Viz'e bir oluşturucu karesi 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çevelerini toplar.
  4. Viz bir çekiliş planlıyor.
  5. Viz, birleştirilmiş birleştirici çerçevesini ekrana çizer.

Web sayfasını üçüncü sekmede kaydırmak 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 birleştirici 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ığı input etkinlik işleyiciyi tetikler (pointerdown, touchstar, pointermove, touchmove veya wheel) dinleyicilerin etkinlikte preventDefault arayıp aramayacağını kontrol edin.
  6. Ana iş parçacığı, preventDefault öğesinin birleştiriciye ç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 tekrar baz.com'un oluşturma işlemi birleştirici iş parçacığına gönderilir ve
  10. Kaydırma buraya uygulanır ve bar.com için birleştirici iş parçacığı uygulanır oluşturma işlemi, birleştirici etkinlik döngüsünde bir animasyonu işaretler. Daha sonra, özellik ağaçlarındaki kaydırma ofsetini değiştirir ve birleştirici yaşam döngüsünü yeniden çalıştırır. Ayrıca, ana iş parçacığına bir scroll etkinliğini tetiklemesini de söyler (burada gösterilmemiştir).
  11. Viz'e bir oluşturucu karesi gönderilir.
  12. Viz, foo.com oluşturma işlemi için birleştirici çerçeveleri toplar, bar.com oluşturma işlemini ve tarayıcının kullanıcı arayüzünü içerir.
  13. Viz bir çekiliş planlıyor.
  14. Viz, birleştirilmiş birleştirici çerçevesini ekrana çizer.
ziyaret edin.

Birinci sekmedeki iframe #two'daki bir köprüdeki click etkinliğini yönlendirmek için:

  1. Tarayıcı işlemine bir input etkinliği (fare, dokunma veya klavye) gelir. Yaklaşık bir isabet testi yapar bar.com iframe oluşturma sürecinin tıklamayı alması gerektiğini belirler ve oraya gönderir.
  2. bar.com için birleştirici iş parçacığı, click etkinliğini ana iş parçacığına yönlendirir oluşturur 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ığı isabeti için giriş etkinliği işlemcisi, iframe'deki DOM öğesi tıklanır ve komut dosyalarının gözlemlemesi için bir click etkinliğini tetikler. preventDefault ifadesini duymayıp köprüye gider.
  4. Köprünün hedef sayfası yüklendiğinde yeni durum oluşturulur. "oluşturma değiştirilen DOM"ye benzer adımlarla önceki örneğe bakalım. (Bu müteakip değişiklikler burada gösterilmemiştir.)

Paket servis

Oluşturmanın işleyiş şeklini hatırlamak ve içselleştirmek çok zaman alabilir.

Buradaki ana fikir şudur: modülerleştirme ve ayrıntılara özen gösterme, bağımsız bileşenlerden yararlanır. Bu bileşenler daha sonra paralel olarak sürecin ve iş parçacığının ölçeklenebilir performans ve genişletilebilirlik fırsatları sunar.

Her bileşen, projenizin performansı ve özelliklerini geliştirmede modern web uygulamaları.

Temel veri yapıları hakkında bilgi edinmeye devam edin. Bunlar, RenderingNG için kod bileşenleri kadar önemlidir.

Çizimler: Una Kravets.