renderNG mimarisi

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. İç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 tarayıcı arayüzüdür. Dokunmatik ekranlar, fareler, klavyeler ve diğer donanım cihazlarından ham giriş etkinlikleri akışı da vardı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, üst düzey dokümanda yer alan her iframe için alt çerçeveleri ve bunların yinelemeli iframe alt öğeleri vardır.

Görsel efekt; kaydırma, dönüştürme, klip, filtre, opaklık veya karışım gibi bit eşlemlere uygulanan bir grafik işlemidir.

Mimari bileşenler

renderNG'de bu görevler, birkaç aşama ve kod bileşeni arasında mantıksal olarak bölünür. Bileşenler, bu iş parçacıklarının içinde çeşitli CPU işlemlerinde, iş parçacıklarında ve alt bileşenlerde bulunur. Bunların her biri, tüm web içeriklerinin güvenilirlik, ölçeklenebilir performans ve genişletilebilirlik elde edilmesinde önemli bir rol oynar.

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

Oluşturma işlemi, birkaç aşama ve birkaç yapıyla birlikte oluşturulan bir ardışık düzende ilerler. Her aşama, oluşturma sırasında 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 ş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 belirleyip sabit parça ağacını oluşturun.
4. Ön boyama: İşlem özelliği ağaçlarını hesaplama ve mevcut görüntüleme listelerini ve GPU doku karolarını uygun şekilde geçersiz kılma.
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 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: 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 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 doğrudan burada anlatılmaz ancak aynı ardışık düzenin basitleştirilmiş bir sürümü olarak düşünülebilir (aslında bu ardışık düzenin uygulanması, kodun büyük kısmını paylaşmaktadır). Video (doğrudan gösterilmez) ise genellikle karelerin kodunu GPU doku karolarına çözen bağımsız bir kodla oluşturulur. Bu kod daha sonra birleştirici çerçevelere ve çizim adımına yerleştirilir.

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

CPU işlemleri

Birden fazla CPU işleminin kullanılması, siteler arasında ve tarayıcı durumundan performans ve güvenlik izolasyonu, ayrıca GPU donanımına karşı kararlılık 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. Birçok içerik 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 tane tarayıcı işlemi vardır.
• Viz işlemi, birden fazla oluşturma işleminden ve tarayıcı işleminden birleştirmeyi toplar. GPU'yu kullanarak dilimleyip çizim yapar. Bir tane Viz işlemi vardır.

Farklı siteler her zaman farklı oluşturma işlemlerinde kullanılır.

Aynı sitedeki birden fazla tarayıcı sekmesi veya penceresi, sekmelerden birinin diğerini açılması gibi birbiriyle ilişkili olmadığı sürece genellikle farklı oluşturma işlemlerine tabi tutulur. Chromium, masaüstündeki güçlü bellek baskısı altında alakalı olmasa bile aynı siteden birden fazla sekmeyi 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 sürecine ayırmak, GPU sürücülerinde veya donanımında karşılaşılabilecek hatalar karşısında 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ıda çok sayıda sekme ve pencere bulunabileceği ve hepsinde çizilecek tarayıcı kullanıcı arayüzü pikselleri olduğu için, 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. Bu, performans izolasyonu için değil, Chromium'un web oluşturma motorunun kullanım kolaylığından faydalanmak içindir.

Eski Android cihazlarda, oluşturma ve tarayıcı işlemi bir Web Görünümü'nde kullanıldığında paylaşılır (bu genellikle Android'deki Chromium için geçerli değildir, yalnızca Web Görünümü için geçerlidir). WebView'da tarayıcı işlemi aynı zamanda yerleştirme uygulamasıyla da 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

İş parçacıkları; yavaş görevler, ardışık düzen paralelliği ve birden fazla arabelleğe alma işlemine rağmen performans yalıtımı ve yanıt performansı oluşturmaya 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ğıtmayı 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 görüntü bit eşlemleri ve blob'ları oluşturma gibi görevleri gerçekleştirir.
  • Web İşçileri komut dosyasını ve OffscreenCanvas için oluşturma etkinliği döngüsünü çalıştırır.
• 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.
  • Besteci iş parçacığı yardımcıları Viz kafes görevlerini koordine eder ve görüntü kodu çözme görevlerini, iş akışlarını ve yedek kafesleri yürütür.
• Medya, demuxer veya ses çıkışı ileti dizileri video ve ses akışlarının kodunu çözer, işler ve senkronize eder. (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ın ayrılması, animasyon ve ana iş parçacığı çalışmalarından kaydırmada performans izolasyonu açısından kritik öneme sahiptir.

Her oluşturma işlemi için yalnızca bir ana iş parçacığı vardır, ancak aynı siteye ait 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. 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. Birleştirme çalışan iş parçacıkları, Viz işleminde çalışan görevleri koordine eder, ancak her yerde GPU hızlandırması, sürücü hataları gibi Chromium'un kontrolü dışındaki nedenlerden dolayı başarısız olabilir. 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 daha fazla CPU çekirdeğine sahip olduğundan ve mobil cihazlara kıyasla pil kısıtlaması daha az olduğundan genellikle daha fazla iş parçacığı kullanırlar. Bu, ölçeği artırma ve azaltma örneğidir.

Oluşturma süreci ileti dizisi mimarisi, üç farklı optimizasyon kalıbının bir uygulamasıdır:

• Yardımcı iş parçacıkları: Üst iş parçacığının diğer eş zamanlı isteklere yanıt vermesini sağlamak için uzun süreli alt görevleri ek iş parçacıklarına gönderin. Ana iş parçacığı yardımcısı ve birleştirici yardımcı iş parçacıkları, bu tekniğin iyi örnekleridir.
• Birden çok arabelleğe alma: Oluşturma gecikmesini gizlemek için, yeni içerik oluştururken önceden oluşturulan içeriği gösterir. 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 aynı anda ç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 birleştirme iş parçacığı, 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 iş parçacığı yardımcıları, görüntü kod çözme görevlerini ve yedek kafes veya kodu çözmeyi yürütür.

Tarayıcı işlemi, oluşturma ve birleştirme iş parçacığının, oluşturma işleminin koduna ve işlevine benzer. Aralarındaki tek fark, ana iş parçacığı ve birleştirici iş parçacığının tek bir iş parçacığında birleştirilmesidir. Tasarım gereği uzun ana iş parçacığı görevlerinden performans yalıtımı gerekmediğinden bu durumda yalnızca bir iş parçacığına ihtiyaç vardır.

Viz işlemi

• GPU ana iş parçacığı kafesleri, listeleri ve video karelerini GPU doku karolarında görüntüler ve ekrana birleştirici kareleri çizer.
• Ekran birleştirici iş parçacığı, her oluşturma işleminden ve tarayıcı işleminden gelen birleştirme işlemini ekranda sunulabilecek şekilde tek bir birleştirici 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ş parçacığındaki yavaşlamanın bir nedeni, tedarikçi firmaya özgü GPU sürücüleri gibi Chromium dışı koda yapılan ve tahmin edilmesi zor şekillerde yavaş olabilen çağrılardır.

Bileşen yapısı

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

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

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 gönderme bileşeni, bir etkinlik tarafından hangi DOM öğesinin hedeflendiğini öğrenmek için isabet testlerini yürütür ve giriş etkinliği gönderme algoritmalarını ve varsayılan davranışları çalıştırır.

Oluşturma etkinlik döngüsü planlayıcısı ve koşucusu, etkinlik döngüsünde neyin ne zaman çalıştırılacağına karar verir. Oluşturmayı, cihaz ekranıyla eşleşen bir tempoda gerçekleşecek şekilde programlar.

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şlemi için yereldir, aksi takdirde uzaktır.

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

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, diğer yerel çerçeve ağaçlarıyla aynı oluşturma işleminde olabilir veya olmayabilir. 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ş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, 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şleminin hem ana iş parçacığında hem de birleştiricide gerçekleşebileceğini unutmayın.)
• Giriş ve isabet testi işleyici, kaydırma hareketlerinin birleştirici iş parçacığında çalıştırılıp çalıştırılamayacağını ve hangi oluşturma işlemi isabet testlerinin hedeflemesi gerektiğini belirlemek için, birleştirilmiş katmanların çözünürlüğünde giriş işleme ve isabet testleri 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şlem, iş parçacığı ve bileşen yapısı aşağıdaki gibi görünür:

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 kafenin tamamlanmasını beklemez ve bunun yerine, 15. adım yürütülmeden önce kafes görevleri tarafından çözülmesi gereken senkronizasyon jetonu adı verilen bir öğeyi kullanır.
12. Viz'e bir oluşturucu karesi 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çevelerini toplar.
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ığı, mevcut özellik ağaçlarını değiştirerek bir oluşturucu etkinlik döngüsünde bir animasyonu işaretler. 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ığı, 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 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 oluşturma işleminin birleştirici iş parçacığı, 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, bar.com oluşturma işlemi ve tarayıcı kullanıcı arayüzü için birleştirici çerçevelerini toplar.
13. Viz bir çekiliş planlıyor.
14. Viz, birleştirilmiş birleştirici çerçevesini ekrana çizer.

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. 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ığı isabeti için giriş etkinliği işlemcisi, iframe'de hangi DOM öğesinin tıklandığını belirlemeyi test eder 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ü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şturmanın işleyiş şeklini hatırlamak ve içselleştirmek çok zaman alabilir.

Buradaki en önemli nokta, oluşturma ardışık düzeninin dikkatli bir şekilde modifiye edilmesi ve ayrıntılara özen gösterilerek birkaç bağımsız bileşene bölünmesidir. Daha sonra 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ına bölünmüştür.

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

OluşturmaNG için kod bileşenleri kadar önemli olan temel veri yapıları hakkında bilgi edinmeye devam edin.

---

Çizimler: Una Kravets.