Yayınlanma tarihi: 31 Mart 2014
CSSOM ve DOM ağaçları bir oluşturma ağacında birleştirilir. Bu ağaç daha sonra her görünür öğenin düzenini hesaplamak için kullanılır ve pikselleri ekranda oluşturan boyama işlemine giriş olarak hizmet eder. Bu adımların her birini optimize etmek, optimum oluşturma performansı elde etmek için çok önemlidir.
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 her ikisi de dokümanın farklı yönlerini yakalayan bağımsız nesnelerdir: Biri içeriği, diğeri ise dokümana uygulanması gereken stil kurallarını tanımlar. İkisini nasıl birleştiririz ve tarayıcının ekranda piksel oluşturmasını nasıl sağlarız?
Ö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 nesnenin tam konumunu ve boyutunu hesaplar.
- Son adım, son oluşturma ağacını alan ve pikselleri ekrana oluşturan boyama işlemidir.
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 oluşturma ağacından da çıkarılır. Örneğin, yukarıdaki örnekte span düğümü, "display: none" özelliğini ayarlayan açık bir kuralımız olduğu için oluşturma ağacında yoktur.
Her görünür düğüm için uygun eşleşen CSSOM kurallarını bulun ve uygulayın.
İçerikleri ve hesaplanmış stilleri içeren görünür düğümler yayınlayı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 örnekteki <body>, iç içe yerleştirilmiş iki <div> içerir: İlk (üst) <div>, düğümün görüntü boyutunu görüntü alanının genişliğinin 50%'si olarak ayarlar ve üst öğe tarafından kapsanan ikinci <div>, width'ını üst öğesinin 50%'si (yani görüntü alanının genişliğinin% 25'i) olarak ayarlar.
Düzenleme sürecinin çıktısı, görüntü alanındaki her öğenin tam konumunu ve boyutunu tam olarak yakalayan bir "kutu modeli"dir: Tüm göreli ölçümler ekrandaki 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ıma genellikle "boyama" veya "rasterleştirme" denir.
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ünya" örneğimizin düzen aşamasını inceleyin:
- "Düzen" etkinliği, zaman çizelgesinde oluşturma ağacı oluşturma, 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'u bir oluşturma ağacında birleştirin.
- Her düğümün geometrisini hesaplamak için düzeni oluşturma ağacında ç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 uygulanırken harcanan toplam süreyi en aza indirme işlemidir. Bu sayede içerik, ekranda mümkün olduğunca hızlı bir şekilde oluşturulur ve ilk oluşturma işleminden sonra ekran güncellemeleri arasındaki süre azaltılır. Böylece, etkileşimli içerik için daha yüksek yenileme hızları elde edilir.