Yayınlanma tarihi: 31 Mart 2014
Tarayıcının sayfayı oluşturabilmesi için DOM ve CSSOM ağaçlarını oluşturması gerekir. Bu nedenle, hem HTML hem de CSS'yi tarayıcıya mümkün olduğunca hızlı bir şekilde göndermemiz gerekiyor.
Özet
- Baytlar → karakterler → jetonlar → düğümler → nesne modeli.
- HTML işaretleme, Belge Nesne Modeli'ne (DOM) dönüştürülür; CSS işaretleme ise CSS Nesne Modeli'ne (CSSOM) dönüştürülür.
- DOM ve CSSOM bağımsız veri yapılarıdır.
- Chrome Geliştirme Araçları Performans paneli, DOM ve CSSOM'un oluşturma ve işleme maliyetlerini yakalayıp incelememize olanak tanır.
Belge Nesne Modeli (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Mümkün olan en basit durumdan başlayın: Bazı metinler ve tek bir resim içeren düz bir HTML sayfası. Tarayıcı bu sayfayı nasıl işler?
- Dönüşüm: Tarayıcı, diskteki veya ağdaki HTML'nin ham baytlarını okur ve dosyanın belirtilen kodlamasına (ör. UTF-8) göre bunları tek tek karakterlere dönüştürür.
- İşaretlere ayırma: Tarayıcı, karakter dizelerini W3C HTML5 standardında belirtildiği gibi farklı işaretlere (ör.
<html>,<body>) ve köşeli parantez içindeki diğer dizelere dönüştürür. Her jetonun özel bir anlamı ve kendi kuralları vardır. - Kelime dizme: Oluşturulan jetonlar, özelliklerini ve kurallarını tanımlayan "nesnelere" dönüştürülür.
- DOM oluşturma: Son olarak, HTML işaretleme farklı etiketler arasındaki ilişkileri tanımladığından (bazı etiketler diğer etiketlerin içinde bulunur) oluşturulan nesneler, orijinal işaretlemede tanımlanan üst öğe-alt öğe ilişkilerini de yakalayan bir ağaç veri yapısında bağlanır: HTML nesnesi, body nesnesinin üst öğesidir, body ise dokümanın tüm temsili oluşturulana kadar paragraph nesnesinin üst öğesidir.
Tüm bu sürecin nihai çıktısı, basit sayfamızın Belge Nesne Modeli'dir (DOM). Tarayıcı, sayfanın diğer tüm işlemleri için bu modeli kullanır.
Tarayıcı, HTML işaretlemesini her işlediğinde önceden tanımlanmış tüm adımları uygular: Baytları karakterlere dönüştürme, jetonları tanımlama, jetonları düğümlere dönüştürme ve DOM ağacını oluşturma. Bu işlemin tamamı, özellikle işlenmesi gereken çok sayıda HTML varsa biraz zaman alabilir.
Chrome Geliştirici Araçları'nı açıp sayfa yüklenirken zaman çizelgesi kaydederseniz bu adımın gerçekte ne kadar sürdüğünü görebilirsiniz. Önceki örnekte, bir HTML bölümünü DOM ağacına dönüştürmek yaklaşık 5 ms sürmüştür. Daha büyük bir sayfa için bu işlem önemli ölçüde daha uzun sürebilir. Tarayıcının büyük miktarda HTML işlemesi gerekiyorsa bu, sorunsuz animasyonlar oluştururken darboğaz oluşturabilir.
DOM ağacı, belge işaretlemesinin özelliklerini ve ilişkilerini yakalar ancak öğenin oluşturulduğunda nasıl görüneceğini bize söylemez. Bu, CSSOM'un sorumluluğundadır.
CSS Nesne Modeli (CSSOM)
Tarayıcı, temel sayfamızın DOM'sini oluştururken dokümanın <head> bölümünde harici bir CSS stil sayfasına (style.css) atıfta bulunan bir <link> öğesiyle karşılaştı. Sayfayı oluşturmak için bu kaynağa ihtiyaç duyacağını tahmin ederek hemen bu kaynak için bir istek gönderir. Bu istek, aşağıdaki içerikle geri döner:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Stillerimizi doğrudan HTML işaretlemesi içinde (satır içi) tanımlayabilirdik ancak CSS'mizi HTML'den bağımsız tutmak, içerik ve tasarımı ayrı konular olarak ele almamıza olanak tanır: Tasarımcılar CSS üzerinde çalışabilir, geliştiriciler ise HTML'ye ve diğer konulara odaklanabilir.
HTML'de olduğu gibi, alınan CSS kurallarını tarayıcının anlayabileceği ve kullanabileceği bir şeye dönüştürmemiz gerekir. Bu nedenle, HTML işlemini HTML yerine CSS için tekrarlıyoruz:
CSS baytları karakterlere, ardından jetonlara, ardından düğümlere dönüştürülür ve son olarak "CSS Nesne Modeli" (CSSOM) olarak bilinen bir ağaç yapısına bağlanır:
CSSOM neden ağaç yapısına sahiptir? Tarayıcı, sayfadaki herhangi bir nesnenin nihai stil grubunu hesaplarken söz konusu düğüm için geçerli olan en genel kuraldan başlar (örneğin, bir body öğesinin alt öğesiyse tüm body stilleri geçerli olur). Ardından, daha spesifik kurallar uygulayarak hesaplanan stilleri yinelemeli olarak hassaslaştırır. Yani kurallar "aşağı doğru basamaklanır".
Daha somut bir örnek vermek gerekirse daha önce açıklanan CSSOM ağacını düşünün. body öğesine yerleştirilen <span> etiketinde yer alan tüm metinler 16 piksel yazı tipi boyutuna sahiptir ve kırmızı metindir. font-size yönergesi, body öğesinden span öğesine doğru basamak basamak uygulanır. Ancak bir span, paragraf (p) etiketinin alt öğesiyse içeriği gösterilmez.
Ayrıca, daha önce açıklanan ağacın tam CSSOM ağacı olmadığını ve yalnızca stil sayfamızda geçersiz kılmaya karar verdiğimiz stilleri gösterdiğini unutmayın. Her tarayıcı, "kullanıcı aracısı stilleri" olarak da bilinen varsayılan bir stil grubu sağlar. Kendi stillerimizi sağlamadığımızda gördüğümüz stil budur. Stillerimiz bu varsayılanları geçersiz kılar.
CSS işlemenin ne kadar sürdüğünü öğrenmek için DevTools'ta bir zaman çizelgesi kaydedebilir ve "Stili Yeniden Hesapla" etkinliğini arayabilirsiniz: DOM ayrıştırma işleminden farklı olarak zaman çizelgesi ayrı bir "CSS'yi Ayrıştır" girişi göstermez. Bunun yerine, ayrıştırma ve CSSOM ağacı oluşturmanın yanı sıra hesaplanmış stillerin yinelemeli hesaplamasını tek bir etkinlik altında yakalar.
Önemsiz stil grubumuzun işlenmesi yaklaşık 0,6 ms sürer ve sayfadaki sekiz öğeyi etkiler.Bu süre çok uzun olmasa da yine de ücretsiz değildir. Ancak bu sekiz element nereden geldi? CSSOM ve DOM bağımsız veri yapıları olduğundan Tarayıcı, önemli bir adımı gizliyor. Ardından, DOM ve CSSOM'u birbirine bağlayan oluşturma ağacı ele alınacaktır.