Nesne Modelini Oluşturma

Tarayıcının sayfayı oluşturabilmesi için önce DOM ve CSSOM ağaçlarını oluşturması gerekir. Sonuç olarak, HTML ve CSS'yi tarayıcıya mümkün olduğunca hızlı bir şekilde sağladığımızdan emin olmamız gerekir.

TL;DR

Doküman 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 örnekle başlayalım: biraz metin ve tek bir resim içeren sade bir HTML sayfası. Bu basit sayfayı işlemek için tarayıcının ne yapması gerekir?

DOM yapım süreci

  1. Dönüştürme: Tarayıcı, HTML'nin işlenmemiş baytlarını diskten veya ağdan okur ve bunları, dosyada belirtilen kodlamaya (ör. UTF-8) dayanarak bağımsız karakterlere çevirir.
  2. Belirteçlere Çevirme: Tarayıcı, karakter dizelerini W3C HTML5 standardının belirlediği ayrı belirteçlere dönüştürür; ör. "", "" ve "açılı parantezler" içindeki diğer dizeler. Her bir belirtecin özel bir anlamı ve bir kural kümesi vardır.
  3. Kuralları Belirleme: Yayınlanan belirteçler, kendi özelliklerini ve kurallarını tanımlayan nesnelere dönüştürülür.
  4. DOM yapımı: Son olarak, HTML biçimlendirmesi farklı etiketler arasındaki ilişkileri tanımladığından (bazı etiketler, başka etiketlerin içinde yer alır), oluşturulan nesneler bir ağaç veri yapısında bağlanır. Bu yapı, orijinal biçimlendirmede tanımlanan üst-alt ilişkilerini de yakalar: Ör. HTML nesnesi, body nesnesinin bir üst öğesidir, body nesnesi de paragraph nesnesinin üst öğesidir.

DOM ağacı

Bu sürecin tamamının nihai çıktısı Doküman Nesne Modeli veya basit sayfamızın DOMsidir. Tarayıcı, sayfanın sonraki tüm işlemeleri için bunu kullanır.

Tarayıcının HTML biçimlendirmesini işlemesinin gerektiği her defasında, tarayıcı yukarıdaki adımların tümünü gerçekleştirmek zorundadır: Baytları karakterlere dönüştürür, belirteçleri tanımlar, belirteçleri düğümlere dönüştürür ve DOM ağacını oluşturur. Tüm bu süreç, özellikle işlenecek büyük miktarda HTML'miz olduğunda biraz zaman alabilir.

DOM yapımını DevTools'ta takip etme

Chrome DevTools'u açar ve sayfa yüklenirken bir zaman çizelgesi kaydederseniz bu adımın gerçekleştirilmesinin gerçekte ne kadar sürdüğünü görebilirsiniz. Yukarıdaki örnekte, HTML bayt parçasının DOM ağacına dönüştürülmesi yaklaşık 5 ms sürmüştür. Elbette, sayfa, çoğu sayfada olduğu gibi daha geniş olsaydı bu süreç çok daha uzun sürebilirdi. Akıcı animasyonlar oluşturmayla ilgili ilerideki bölümlerimizde, tarayıcının büyük miktarlarda HTML işlemesi gerekirse bunun kolayca tıkanabileceğiniz bir nokta olacağını göreceksiniz.

DOM ağacı hazır olduğunda, sayfayı ekranda oluşturmak için yeterli bilgiye sahip olur muyuz? Henüz değil! DOM ağacı, doküman biçimlendirmesinin özelliklerini ve ilişkilerini yakalar, ancak öğenin oluşturulduğunda nasıl görünmesi gerektiğiyle ilgili bize hiçbir şey söylemez. Bu, CSSOM'nin sorumluluğundadır. Şimdi de ona bakacağız!

CSS Nesne Modeli (CSSOM)

Tarayıcı, basit sayfamızın DOM'sini oluştururken, dokümanın başlık bölümünde harici bir CSS stil sayfasına (style.css) başvuruda bulunan bir bağlantı etiketiyle karşılaştı. Sayfayı oluşturmak için bu kaynağa ihtiyacı olacağını tahmin ederek hemen bu kaynak için bir istek gönderir ve istek, aşağıdaki içerikle geri gelir:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Elbette, stillerimizi doğrudan HTML biçimlendirmesinin içinde (satır içi) açıklayabilirdik, ancak CSS'mizi HTML'den bağımsız tutmamız içeriği ve tasarımı ayrı konular olarak ele almamıza olanak tanır: Tasarımcılar CSS üzerinde çalışırken, geliştiriciler de HTML üzerine odaklanabilir.

HTML ile olduğu gibi alınan CSS kurallarını, tarayıcının anlayıp çalışabileceği bir şeylere dönüştürmemiz gerekir. Dolayısıyla, bir kez daha, HTML ile yaptığımız çok basit bir işlemi tekrar ederiz:

CSSOM yapım adımları

CSS baytları karakterlere, daha sonra belirteçlere ve düğümlere dönüştürülür; son olarak da CSS Nesne Modeli veya kısaca CSSOM olarak bilinen bir ağaç yapısına bağlanır:

CSSOM ağacı

CSSOMnin neden bir ağaç yapısı var? Sayfadaki herhangi bir nesnenin son stil kümesini hesaplarken tarayıcı, bu düğüm için geçerli olan en genel kuralla başlar (ör. bir gövde öğesinin alt öğesiyse tüm gövde stilleri geçerlidir) ve daha sonra, daha belirli kuralları uygulayarak hesaplanan stilleri giderek daraltır (ör.aşağı doğru basamaklama` kuralları).

Bunu daha somutlaştırmak için yukarıdaki CSSOM ağacını düşünün. Gövde öğesinin içine yerleştirilmiş span etiketinin içindeki metinlerin yazı tipi boyutu 16 piksel ve rengi kırmızı olur. Yazı tipi boyutu yönergesi, gövdeden span düğümüne aşağı doğru basamaklanır. Ancak, bir span etiketi bir paragraf (p) etiketinin alt öğesiyse içerikleri görüntülenmez.

Ayrıca, yukarıdaki ağacın eksiksiz CSSOM ağacı olmadığını, yalnızca stil sayfamızda geçersiz kılmaya karar verdiğimiz stilleri gösterdiğini unutmayın. Her tarayıcı, kullanıcı aracı stilleri olarak bilinen bir varsayılan stiller kümesi sağlar. Kendi stil kümemizi sağlamadığımızda bunu görürüz. Bizim stillerimiz de bu varsayılanları geçersiz kılar (ör. varsayılan IE stilleri). Chrome DevToolsta daha öncehesaplanan stilleri` incelediyseniz ve tüm stillerin nereden geldiğini merak ettiyseniz, artık biliyorsunuz!

CSS işlemesinin ne kadar sürdüğünü mü merak ediyorsunuz? DevTools'ta bir zaman çizelgesi kaydedin ve Stili Yeniden Hesapla olayını arayın: DOM ayrıştırmasından farklı olarak, zaman çizelgesi ayrı bir CSS Ayrıştırma girişi göstermez. Bunun yerine, ayrıştırmayı ve CSSOM ağacı yapımını, ayrıca bu bir olay altında hesaplanan stillerin yinelemeli hesaplamasını yakalar.

CSSOM yapımını DevTools'ta takip etme

Önemsiz stil sayfamızın işlenmesi yaklaşık 0,6 ms sürer ve sayfadaki 8 öğe bundan etkilenir. Çok değil, ama hiç yoktan iyidir. Peki, 8 öğe nereden geldi? CSSOM ve DOM, bağımsız veri yapılarıdır! Görünüşe göre, tarayıcı önemli bir adımı gizliyor. Daha sonra, DOM ve CSSOM'yi birbirine bağlayan oluşturma ağacı hakkında konuşacağız.