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 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 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 örneğin <body>'si 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. Üst öğe tarafından yer alan ikinci <div>, width öğesini üst öğesinin 50% (yani görüntü alanı genişliğinin% 25'i) olacak şekilde ayarlar.
Düzen işleminin sonucu, görüntü alanındaki her bir öğenin tam konumunu ve boyutunu hassas bir şekilde gösteren bir "kutu modeli"dir. İlgili ölçümlerin tümü, 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. Son 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" veya "rasterleştirme" olarak adlandırılır.
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şamayla ilgili bilgi sağlayabilir. Orijinal "merhaba dünya" örneğimizin düzen aşamasını inceleyin:
- "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ğaç oluşturma, düzen ve boyama için gereken süre belgenin boyutuna, uygulanan stillere ve üzerinde çalıştığı cihaza bağlı olarak değişiklik gösterir: Belge ne kadar büyükse tarayıcıda o kadar çok iş yapar, stiller ne kadar karmaşıksa boyama da o kadar fazla zaman alır (örneğin, düz bir rengin boyanması "ucuz"ken gölgenin işlenmesi ve oluşturulması "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.
Tanıtım sayfası basit görünebilir, ancak tarayıcının çok çalışması gerekir. DOM veya CSSOM değiştirilirse ekranda hangi piksellerin yeniden oluşturulması gerektiğini anlamak için bu işlemi tekrar etmeniz 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.