CSSOM ve DOM ağaçları, bir oluşturma ağacında birleştirilir. Ardından, bu ağaçlar, görünür öğelerin her birinin düzenini hesaplamak için kullanılır ve pikselleri ekranda oluşturan boyama işlemine girdi olarak işlev görür. Bu adımların her birini optimize etmek, optimum oluşturma performansı elde etmek için kritik öneme sahiptir.
Nesne modeli oluşturmayla ilgili önceki bölümde, HTML ve CSS girdisine bağlı olarak DOM ve CSSOM ağaçlarını oluşturduk. Bununla birlikte, bunların her ikisi de belgenin farklı yönlerini yakalayan bağımsız nesnelerdir: Biri içeriği, diğeri ise belgeye uygulanması gereken stil kurallarını açıklar. Bu ikisini nasıl birleştirebilir ve tarayıcının pikselleri ekranda oluşturmasını sağlayabiliriz?
Özet
- DOM ve CSSOM ağaçları birleşerek oluşturma ağacını oluşturur.
- Oluşturma ağacı yalnızca sayfanın oluşturulması için gerekli olan düğümleri içerir.
- Düzen, her bir nesnenin tam konumunu ve boyutunu hesaplar.
- Son adım boyamadır. Bu işlem, son oluşturma ağacını alıp pikselleri ekranda oluşturur.
Önce, tarayıcı DOM ve CSSOM'yi, sayfadaki tüm görünür DOM içeriğini ve her düğümün tüm CSSOM stil bilgilerini yakalayan bir "oluşturma ağacı"nda birleştirir.
Oluşturma ağacını oluşturmak için tarayıcı kabaca aşağıdakileri yapar:
DOM ağacının kökünden başlayarak her bir görünür düğümü inceleyin.
- Bazı düğümler (örneğin komut dosyası etiketleri, meta etiketler vb.) görünmez ve oluşturulan çıkışa yansıtılmadıkları için atlanır.
- Bazı düğümler CSS aracılığıyla gizlenmiştir ve oluşturma ağacından da çıkarılmıştır. Örneğin, yukarıdaki örnekte span düğümü oluşturma ağacında yok, çünkü üzerinde "display: none" özelliğini ayarlayan açık bir kural var.
Görünen her düğüm için uygun CSSOM kurallarını bulup uygulayın.
İçeriği ve hesaplanan stilleri olan görünür düğümleri yayınlayın.
Son çıktı, ekrandaki tüm görünür içeriğin hem içerik hem de stil bilgilerini içeren bir oluşturma ağacıdır. Oluşturma ağacı hazır olduğunda "düzen" aşamasına geçebiliriz.
Şu ana kadar hangi düğümlerin görünmesi gerektiğini ve bunların hesaplanan stillerini hesapladık ancak cihazın görüntü alanı içindeki tam konumlarını ve boyutlarını hesaplamadık. Bu, "yeniden düzenleme" olarak da bilinen "düzen" aşamasıdır.
Sayfadaki her bir nesnenin tam boyutunu ve konumunu belirlemek için, tarayıcı oluşturma ağacının kökünden başlar ve bu ağaçta gezinir. Basit, uygulamalı bir örnek ele alalım:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Yukarıdaki sayfanın gövdesi, iç içe yerleştirilmiş iki div öğesi içerir: İlk (üst) div, düğümün görüntüleme boyutunu görüntü alanı genişliğinin% 50'sine, ikinci div ise üst öğe tarafından içerilen ikinci div öğesi, genişliğini üst öğesinin% 50'si; yani görüntü alanı genişliğinin% 25'i olacak şekilde ayarlar.
Düzen işleminin sonucu, görüntü alanı içindeki her öğenin tam konumunu ve boyutunu kesin olarak yakalayan bir "kutu modeli"dir: tüm göreli ölçümler ekranda mutlak piksellere dönüştürülür.
Son olarak, artık hangi düğümlerin göründüğünü, bunların hesaplanan stillerini ve geometrilerini bildiğimize göre son aşamaya aktarabiliriz. Bu aşama, oluşturma ağacındaki her bir düğümü ekrandaki gerçek piksellere dönüştürür. Bu adım genellikle "resim" veya "kafesleme" olarak adlandırılır.
Tarayıcının epey işlem yapması gerektiğinden bu işlem biraz zaman alabilir. Ancak Chrome Geliştirici Araçları, yukarıda açıklanan üç aşama hakkında da bilgi verebilir. Orijinal "merhaba dünya" örneğimizin düzen aşamasını inceleyelim:
- "Düzen" etkinliği, Zaman Çizelgesi'ndeki oluşturma ağacı yapısını, konumunu ve boyut hesaplamasını yakalar.
- Düzen tamamlandığında tarayıcı, oluşturma ağacını ekranda piksellere dönüştüren "Paint Setup" ve "Paint" etkinliklerini yayınlar.
Oluşturma ağacı oluşturma, düzenleme ve boyama için gereken süre, dokümanın boyutuna, uygulanan stillere ve çalıştırıldığı cihaza bağlı olarak değişir: Doküman ne kadar büyükse tarayıcının yaptığı işlem de o kadar karmaşıktır; stiller ne kadar karmaşıksa boyama için de o kadar zaman gerekir (örneğin, düz bir rengin boyanması "ucuz"ken bir gölgenin hesaplanması ve oluşturulması "pahalıdır").
Sayfa artık görüntü alanında görünür hale gelir:
Tarayıcıdaki adımların kısa bir özetini aşağıda bulabilirsiniz:
- HTML işaretlemesini işleyin ve DOM ağacını oluşturun.
- CSS işaretlemesini işleyin ve CSSOM ağacını oluşturun.
- DOM ve CSSOM'yi bir oluşturma ağacında birleştirin.
- Her düğümün geometrisini hesaplamak için oluşturma ağacında düzen çalıştırın.
- Tek tek düğümleri ekrana boyayın.
Demo sayfamız basit gibi görünse de biraz çalışma gerektiriyor. DOM veya CSSOM değiştirilmişse hangi piksellerin ekranda yeniden oluşturulması gerektiğini anlamak için işlemi tekrarlamanız gerekir.
Kritik oluşturma yolunu optimize etme, yukarıdaki adımdaki 1 ile 5 arasındaki adımları gerçekleştirmek için harcanan toplam süreyi en aza indirme işlemidir. Bu şekilde içerik mümkün olduğunca hızlı bir şekilde ekranda oluşturulur ve ilk oluşturma işleminden sonra ekran güncellemeleri arasındaki süre kısaltılır. Böylece, etkileşimli içerik için daha yüksek yenileme hızları elde edilir.