Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama
Tarayıcının HTML ve CSS baytlarıyla ne yaptığını görün: DOM ve CSSOM'u oluşturma, yerleşimi hesaplama ve pikselleri boyama.
Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Baytlardan Piksellere
Tarayıcı sunucudan HTML baytlarını aldığında, bunları ekranda gördüğünüz piksellere dönüştüren çok adımlı bir işlem gerçekleşir. Bu işlem hattını bilmek, performansı iyileştirmenize ve görsel bozulmalara neyin neden olduğunu anlamanıza yardımcı olur.
1. Adım — HTML'yi Ayrıştırma: DOM'u Oluşturma
Tarayıcının HTML ayrıştırıcısı bayt akışını okur ve belgedeki her HTML öğesini, metin düğümünü ve yorumu temsil eden bir düğüm ağacı olan Belge Nesne Modeli (DOM)'ni oluşturur.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'2. Adım — CSS'i Ayrıştırma: CSSOM'u Oluşturma
Aynı anda CSS baytları, stil kurallarından oluşan bir ağaç olan CSS Nesne Modeli (CSSOM)'a ayrıştırılır. CSS, oluşturmayı engelleyicidir: tarayıcı, görünür içerik için stilleri hesaplayana kadar pikselleri çizmez.
3. Adım — Oluşturma Ağacı
Tarayıcı, DOM ile CSSOM'u Oluşturma Ağacı içinde birleştirir. Yalnızca görünür düğümler dahil edilir — display:none kullanan öğeler dışarıda bırakılır. Oluşturma ağacındaki her düğüm, kendisiyle boyanacağı hesaplanmış stili taşır.
4. Adım — Yerleşim (Yeniden Akış)
Yerleşim, kutu modelini ve görünüm alanının genişliğini kullanarak oluşturma ağacındaki her düğümün tam konumunu ve boyutunu hesaplar. Buna yeniden akış da denir. Yerleşim maliyetlidir; JavaScript'te bunu tekrar tekrar tetiklemekten kaçının.
5. Adım — Boyama
Boyama, yerleşimi ekrandaki gerçek piksellere dönüştürür. Tarayıcı arka planları, kenarlıkları, metinleri ve görüntüleri katman katman çizer. Bazı öğeler, GPU hızlandırmalı görüntüleme için kendi birleştirme katmanlarını oluşturur.
6. Adım — Birleştirme
Tarayıcının birleştiricisi, boyanmış katmanları son karede birleştirir ve bu kareyi ekrana gönderir. Animasyonlarda transform ve opacity kullanmak, birleştiricinin bunları GPU üzerinde çalıştırmasını ve yerleşim ile boyama işlemlerini tamamen atlamasını sağlar.
Oluşturmayı Ne Engeller?
<head> içindeki CSS oluşturmayı engeller. JavaScript, varsayılan olarak hem ayrıştırmayı hem de oluşturmayı engeller. HTML ayrıştırılırken oluşturmayı engellemeden JS'yi ayrıştırmak için betik etiketlerinde defer kullanın.
<script src="app.js" defer></script>Kritik Oluşturma Yolu
Kritik Oluşturma Yolu, HTML baytlarının alınmasından ilk pikselin görüntülenmesine kadar geçen sıradır. Bunu iyileştirmek; oluşturmayı engelleyen kaynakların sayısını ve boyutunu en aza indirmek, kritik olmayan JS ve CSS'yi ertelemek anlamına gelir.
Yeniden Akış ve Yeniden Boyama
Yerleşim özelliklerini (genişlik, kenar boşluğu, konum) değiştirmek yeniden akışı ve yeniden boyamayı tetikler. Yalnızca görsel özellikleri (renk, arka plan) değiştirmek sadece yeniden boyamayı tetikler. Dönüşüm veya opaklığı değiştirmek yalnızca birleştirmeyi tetikler. En düşük maliyetli işlemi tercih edin.
DevTools: Boyama Zaman Çizelgesini Görüntüleme
Chrome DevTools'ta Performans panelini açın, bir sayfa yüklemesini kaydedin ve zaman akışını inceleyin. Yeşil Boyama olaylarını görür ve hangi öğelerin maliyetli yerleşimlere neden olduğunu belirleyebilirsiniz.
Hızlı Kontrol
Sayfadaki her öğenin tam boyutunu ve konumunu hangi adım hesaplar?
Özet: Oluşturma İşlem Hattı
HTML → DOM → CSSOM → Oluşturma Ağacı → Yerleşim → Boyama → Birleştirme. Her adım bir sonrakini besler. Kritik oluşturma yolunu iyileştirmek, ilk görünür içeriğin olabildiğince hızlı görünmesi için bu işlem hattını kısaltmak anlamına gelir.
Sıkça Sorulan Sorular
“Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama” dersi ücretsiz mi?
Evet — “Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama” dersinde ne öğreneceğim?
Tarayıcının HTML ve CSS baytlarıyla ne yaptığını görün: DOM ve CSSOM'u oluşturma, yerleşimi hesaplama ve pikselleri boyama. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tarayıcılar, DNS ve HTTP: İstek Yaşam Döngüsü
- HTML, CSS ve JavaScript: Her Katmanın Görevi
- Bir Sayfa Nasıl Görüntülenir: DOM, CSSOM, Yerleşim, Boyama
- Geliştirici Araçları: DevTools'u Açma ve Kullanma