Yayınlanma tarihi: 31 Mart 2014
CSSOM ve DOM ağaçları, 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 ekrana işleyen boyama sürecine giriş olarak hizmet eder. Bu adımların her birini optimize etmek, optimum oluşturma performansı elde etmek için kritik öneme sahiptir.
Nesne modelini oluşturma ile ilgili önceki bölümde, HTML ve CSS girişine dayalı olarak DOM ve CSSOM ağaçlarını oluşturmuştuk. Ancak bu 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ştirip tarayıcının ekrandaki pikselleri 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 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ı alıp pikselleri ekrana oluşturma işlemini yapan boyama işlemidir.
Öncelikle tarayıcı, DOM ve CSSOM'u bir "render ağacında" birleştirir. Bu ağaç, sayfadaki tüm görünür DOM içeriğini ve her düğüm için tüm CSSOM stil bilgilerini yakalar.
Tarayıcı, oluşturma ağacını oluşturmak için kabaca şunları yapar:
DOM ağacının kökünden başlayarak her görünür düğümü geçin.
- Bazı düğümler (ör. komut dosyası etiketleri, meta etiketler vb.) görünmez ve oluşturulan çıktıda 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 eksiktir.
Görünür her düğüm için uygun eşleşen CSSOM kurallarını bulup uygulayın.
İçerik ve hesaplanmış stillerle görünür düğümler 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.
Bu noktaya kadar hangi düğümlerin görünür olması gerektiğini ve hesaplanmış stillerini hesapladık ancak cihazın görüntü alanındaki tam konumlarını ve boyutlarını hesaplamadık. Bu, "yeniden akıtma" olarak da bilinen "düzen" 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şlayıp ağacı dolaşır. 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>
Web sayfası olarak oluşturulmuş bu HTML örneğine göz atın.
Önceki örnekteki <body>, iç içe yerleştirilmiş iki <div> içerir: İlk (üst) <div>, düğümün görüntüleme boyutunu görüntü alanı genişliğinin 50%'si olarak ayarlar. Üst öğe tarafından kapsanan ikinci <div> ise width değerini üst öğesinin 50%'si olarak ayarlar. Yani, görüntü alanı genişliğinin% 25'i.
Düzen sürecinin çıktısı, görüntü alanındaki her öğenin tam konumunu ve boyutunu hassas bir şekilde yakalayan bir "kutu modelidir": 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, oluşturma ağacındaki her düğümü ekrandaki gerçek piksellere dönüştüren son aşamaya iletebiliriz. Bu adıma genellikle "boyama" veya "rasterleştirme" denir.
Tarayıcının oldukça fazla işlem yapması gerektiğinden bu biraz zaman alabilir. Ancak Chrome Geliştirici Araçları, daha önce açıklanan üç aşamanın tümü hakkında bilgi sağlayabilir. Orijinal "hello world" ö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üzen tamamlandığında tarayıcı, oluşturma ağacını ekrandaki piksellere dönüştüren "Paint Setup" ve "Paint" etkinliklerini yayınlar.
Render ağacı oluşturma, düzen ve boyama işlemlerini gerçekleştirmek için gereken süre; belgenin boyutuna, uygulanan stillere ve üzerinde çalışılan cihaza göre değişir: Belge ne kadar büyükse tarayıcının yapması gereken iş o kadar çoktur. Stiller ne kadar karmaşıksa boyama işlemi de o kadar uzun sürer (örneğin, düz bir rengin boyanması "ucuz" bir işlemdir ancak gölge oluşturma işlemi hesaplama ve oluşturma açısından "pahalıdır").
Sayfa nihayet görüntü alanında görünür:
Tarayıcının adımlarının kısa bir özetini aşağıda bulabilirsiniz:
- HTML biçimlendirmesini işler ve DOM ağacını oluşturur.
- CSS işaretlemesini işleme ve CSSOM ağacını oluşturma.
- DOM ve CSSOM'yi birleştirerek oluşturma ağacı oluşturun.
- Her düğümün geometrisini hesaplamak için oluşturma ağacında düzeni çalıştırın.
- Tek tek düğümleri ekrana boyayın.
Demo sayfası basit gibi görünse de tarayıcının oldukça fazla çalışması gerekir. DOM veya CSSOM değiştirildiyse ekranda hangi piksellerin yeniden oluşturulması gerektiğini bulmak için işlemi tekrarlamanız gerekir.
Önemli oluşturma yolunu optimize etme, yukarıdaki sıradaki 1-5 arasındaki adımları gerçekleştirirken harcanan toplam süreyi en aza indirme işlemidir. Bu sayede içerik ekranda mümkün olduğunca hızlı şekilde oluşturulur ve ilk oluşturma işleminden sonra ekran güncellemeleri arasındaki süre de kısalır. Diğer bir deyişle, etkileşimli içerik için daha yüksek yenileme hızları elde edilir.