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
- Bayt → karakter → jeton → 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ştirici Araçları Performans paneli, DOM ve CSSOM'nin oluşturma ve işleme maliyetlerini yakalayıp incelememizi sağlar.
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ı, diskten veya ağdan HTML'nin ham baytlarını okur ve bunları, dosyanın belirtilen kodlamasına (ör. UTF-8) göre ayrı karakterlere çevirir.
- İş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şaretlemesi farklı etiketler arasındaki ilişkileri tanımladığından (bazı etiketler diğer etiketlerin içinde yer alır). Oluşturulan nesneler, orijinal işaretlemede tanımlanan üst-alt öğe ilişkilerini de yakalayan bir ağaç veri yapısına bağlanır: HTML nesnesi, body nesnesinin üst öğesidir, body nesnesi, belgenin tüm gösterimi oluşturulana kadar paragraf nesnesinin üst öğesidir.
Tüm bu sürecin nihai sonucu, basit sayfamızın Belge Nesne Modeli'dir (DOM). Tarayıcı bu modeli daha sonraki tüm işlemler için 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. Tüm bu süreç, özellikle de işlememiz gereken büyük miktarda HTML varsa biraz zaman alabilir.
Chrome Geliştirici Araçları'nı açıp sayfa yüklenirken zaman çizelgesi kaydederseniz bu adımın gerçekleştirilmesi için geçen gerçek süreyi 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 çok 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 belirtmez. Bu, CSSOM'nin 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 referans veren <link> öğesiyle karşılaştı: style.css. 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. Gövde öğesinin içine yerleştirilen <span> etiketi içinde yer alan, yazı tipi boyutu 16 piksel olan ve kırmızı metin içeren tüm metinler, font-size yönergesi body'den span'e doğru basamaklar. Ancak span, bir paragraf (p) etiketinin alt öğesiyse içeriği gösterilmez.
Ayrıca, daha önce açıklanan ağacın CSSOM ağacının tam hali 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 bir varsayılan stil grubu sağlar. Kendi stilimizi sağlamadığımızda bunu görürüz ve stillerimiz bu varsayılanları geçersiz kılar.
CSS işlemenin ne kadar sürdüğünü öğrenmek için Geliştirici Araçları'nda bir zaman çizelgesi kaydedebilir ve "Stili Yeniden Hesapla" etkinliğini arayabilirsiniz: DOM ayrıştırmasının aksine, zaman çizelgesi ayrı bir "CSS Ayrıştır" girişi göstermez. Bunun yerine, ayrıştırma, CSSOM ağaç yapısı ile bu tek etkinlik altında hesaplanan stillerin yinelenen hesaplamasını yakalar.
Önemsiz stiller ısıtma işlemimizin 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ıdır. Tarayıcının önemli bir adımı gizlediği anlaşılıyor. Ardından, DOM ve CSSOM'yi birbirine bağlayan oluşturma ağacı ele alınacaktır.