Yayınlanma tarihi: 31 Mart 2014
CSSOM ve DOM ağaçları bir oluşturma ağacında birleştirilir ve daha sonra bu ağaçlar her bir görünür öğenin düzenini hesaplamak için kullanılır ve pikselleri ekrana geçiren bir boya işlemidir. Bunların her birini optimize etmek adımlarının ideal oluşturma performansı için kritik öneme sahip olduğunu unutmayın.
Nesne modelini oluşturmayla ilgili önceki bölümde, DOM ve CSSOM ağaçlarını HTML ve CSS girişine göre oluşturduk. Ancak bunların her ikisi de belgenin farklı yönlerini gösteren bağımsız nesneler: açıklaması, diğeri ise yayınlanması gereken stil kurallarını uygulanacak. İkisini nasıl birleştirip tarayıcının görüntülemesini ekranda piksel sayısı mı var?
Özet
- DOM ve CSSOM ağaçları, oluşturma ağacını oluşturmak için birleştirilir.
- Oluşturma ağacı, yalnızca sayfayı oluşturmak için gereken düğümleri içerir.
- Düzen, her bir nesnenin tam konumunu ve boyutunu hesaplar.
- Son adım, son oluşturma ağacını alan ve pikselleri ekranda oluşturan boyama adımıdır.
Tarayıcı önce DOM ve CSSOM'u bir "oluşturma ağacında" birleştirir. Bu ağaç, sayfadaki tüm görünür DOM içeriğini ve her düğümün tüm CSSOM stil bilgilerini yakalar.
Tarayıcı, oluşturma ağacını oluşturmak için kabaca aşağıdakileri yapar:
DOM ağacının kökünden başlayarak her görünür düğümü tarayın.
- Bazı düğümler (ör. 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 kullanılarak gizlenir ve ayrıca oluşturma ağacından çıkarılır. örneğin, "display: none" değerini ayarlayan açık bir kuralımız olduğundan, span düğümü (yukarıdaki örnekte) oluşturma ağacında yer almıyor görebilirsiniz.
Her görünür düğüm için uygun eşleşen CSSOM kurallarını bulun ve uygulayın.
İçerik ve hesaplanan stilleri içeren görünür düğümleri açığa çıkarın.
Nihai çıkış, ekrandaki tüm görünür içeriğin hem içeriğini hem de stil bilgilerini içeren bir oluşturma ağacıdır. Oluşturma ağacı oluşturulduktan sonra "düzenleme" aşamasına geçebiliriz.
Bu noktaya kadar hangi düğümlerin görünür olması gerektiğini ve bunların hesaplanmış stillerini hesapladık, ancak cihazın görüntü alanındaki tam konumlarını ve boyutlarını hesaplamadık. Bu, "yeniden akış" olarak da bilinen "düzenleme" aşamasıdır.
Tarayıcı, sayfadaki her nesnenin tam boyutunu ve konumunu belirlemek için oluşturma ağacının kökünden başlayarak ağacı tarar. Aşağıdaki örneğe bakın:
<!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>
Önceki örneğin <body> öğesi, iç içe yerleştirilmiş iki <div> içerir: İlk (üst öğe) <div>, düğümün görüntüleme boyutunu görüntü alanı genişliğinin 50% olarak ayarlar. İkinci <div> ise (üst öğe tarafından içerir) width değerini üst öğesinin 50% (50%) olarak ayarlar. görüntü alanı genişliğinin% 25'ini oluşturur.
Düzen sürecinin çıktısı "kutu modeli"dir. Bu özellik, görüntü alanındaki her bir öğenin tam konumunu ve boyutunu hassas bir şekilde yakalar. Tüm göreli ölçümler, ekranda mutlak piksellere dönüştürülür.
Son olarak, hangi düğümlerin görünür olduğunu, hesaplanmış stillerini ve geometrilerini bildiğimize göre bu bilgileri son aşamaya iletebiliriz. Bu aşamada, oluşturma ağacındaki her düğüm ekrandaki gerçek piksellere dönüştürülür. Bu adım genellikle "boyama" olarak adlandırılır "Pikselleştiriliyor".
Tarayıcının yapması gereken çok iş olduğu için bu işlem biraz zaman alabilir. Ancak Chrome Geliştirici Araçları, daha önce açıklanan üç aşamanın tümü hakkında bilgi verebilir. Orijinal "merhaba dünyamız"ın düzen aşamasını inceleyin örnek:
- "Düzen" etkinliği, zaman çizelgesinde oluşturma ağacı, konum ve boyut hesaplamasını yakalar.
- Düzenleme tamamlandığında tarayıcı, oluşturma ağacını ekrandaki piksellere dönüştüren "Paint Setup" ve "Paint" etkinliklerini yayınlar.
Ağ oluşturma, düzen ve boyama işlemlerini gerçekleştirmek için gereken süre, dokümanın boyutuna, uygulanan stillere ve çalıştırıldığı cihaza göre değişir: Doküman ne kadar büyükse tarayıcı o kadar fazla işlem yapar; stiller ne kadar karmaşıksa boyama işlemi de o kadar uzun sürer (örneğin, düz bir rengi boyamak "ucuz"ken gölgeyi hesaplamak ve oluşturmak "pahalı"dır).
Sayfa, görüntü alanında görünür hale gelir:
Tarayıcının adımlarını kısaca özetlemek gerekirse:
- 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üzeni çalıştırın.
- Nodları ekrana tek tek boyayın.
Demo sayfası basit görünse de tarayıcı tarafında oldukça fazla çalışma gerektirir. DOM veya CSSOM değiştirildiyse ekranda hangi piksellerin yeniden oluşturulması gerektiğini belirlemek için işlemi tekrarlamanız gerekir.
Önemli oluşturma yolunu optimize etmek, yukarıdaki sırayla 1 ile 5 arasındaki adımları gerçekleştirmek için harcanan toplam süreyi en aza indirme işlemidir. Bu işlem, içeriği ekranda mümkün olduğunca hızlı oluşturur ve ilk oluşturma işleminden sonra ekran güncellemeleri arasındaki süreyi kısaltır; etkileşimli içerik için daha yüksek yenileme hızları elde edebilirsiniz.