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şaretlemesi, Belge Nesne Modeli'ne (DOM) dönüştürülür. CSS işaretlemesi: 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 harfle başlayın: Metin içeren düz bir HTML sayfası ve tek bir resim. Tarayıcı bu sayfayı nasıl işler?
- Dönüşüm: Tarayıcı, diskteki veya ağdaki ham HTML baytlarını okur ve dosyanın belirtilen kodlamasına (ör. UTF-8) göre bunları tek tek karakterlere dönüştürür.
- Tokenleştirme: Tarayıcı, karakter dizelerini farklı biçimlere dönüştürür
jetonlar (W3C HTML5 standardı tarafından belirtildiği şekliyle)
örneğin,
<html>,<body>—ve içindeki diğer dizeler açılı ayraçları da vardır. Her jetonun özel bir anlamı ve kendi kuralları vardır. - Lexing: Yayılan jetonlar "nesnelere" dönüştürülür. Bu da proje yaşam döngüsünün özellikleri ve kuralları.
- 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. Tüm bu süreç biraz zaman alabilir, özellikle de işlenmesi gereken büyük miktarda HTML kodu varsa bunu yapabiliriz.
Chrome Geliştirici Araçları'nı açıp sayfa yüklenirken zaman çizelgesi kaydederseniz bu adımın uygulanması 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 önemli ölçüde daha uzun sürebilir. Oluştururken düzgün animasyonlar görüntüler. Bu durum, tarayıcının tarayıcı HTML kodu işleme.
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
harici bir CSS'ye referans veren dokümanın <head> içindeki bir <link> öğesi
stil sayfası: 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, jetonlara, düğümlere ve ve son olarak "CSS Nesne Modeli" olarak bilinen bir ağaç yapısına bağlanırlar. (CSSOM):
CSSOM'nin neden ağaç yapısı var? Son kümeyi hesaplarken stil özelliklerini ayarlarsanız tarayıcı en genel olandan kural (örneğin, bir gövde öğesinin alt öğesiyse) tüm gövde stilleri uygulanır) ve ardından hesaplanan stilleri yinelemeli olarak hassaslaştırır. daha spesifik kurallar uygulayarak yani kurallar "aşağıya doğru kademeli olarak iner".
Konuyu daha somut hale getirmek için daha önce açıklanan CSSOM ağacını düşünün. Herhangi bir metin
gövde öğesine yerleştirilen <span> etiketi içinde yer alan,
yazı tipi boyutu 16 pikseldir ve metin kırmızıdır; font-size yönergesi kademeli olarak
body olan düşerek span oldu. 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 bir varsayılan stil grubu sağlar. kullandığımızda, stillerimiz bu stili geçersiz kıldığı varsayılan olarak ayarlanır.
CSS'nin işlenmesinin ne kadar sürdüğünü öğrenmek için zaman çizelgesini Geliştirici Araçları'na gidin ve "Stili Yeniden Hesapla"yı arayın. event: DOM ayrıştırmasının aksine, zaman çizelgesi ayrı bir "CSS Ayrıştırma" göstermiyor giriş yapar ve onun yerine ve CSSOM ağaç yapısına ek olarak yinelemeli hesaplama stillerin toplandığı anlamına gelir.
Basit stil özelliklerimizin işlenmesi yaklaşık 0,6 ms.sürer ve pek fazla bir şey yok, ama yine de ücretsiz bir seçenek değil. Ancak bu sekiz öğe 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 ile CSSOM'u birbirine bağlayan oluşturma ağacı ele alınacaktır.