Tarayıcı HTML'i nasıl ayrıştırır ve sayfayı oluşturur (kritik işleme yolu)?

Question

Accepted Answer

**Kritik işleme yolu**, tarayıcının HTML, CSS ve JS'i piksellere dönüştürmek için aldığı adımların sırasıdır. Bunu anlamak, işlemeyi neyin engellediğini ve sayfaları daha hızlı nasıl boyayabileceğinizi açıklar. ## Adımlar ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## İşlemeyi Neyin Engellediği **CSS işlemeyi engeller.** CSSOM hazır olana kadar tarayıcı boyamaz (stil uygulanmamış içeriğin yanıp sönmesini önlemek için). Bu nedenle büyük/yavaş CSS ilk boyamayı geciktirir — kritik CSS'i küçük tutun ve mümkün olduğunda satır içi yapın. **Senkron komut dosyaları ayrıştırmayı engeller.** Düz bir ` ``` Dahası, CSSOM'a ihtiyaç duyan senkron komut dosyası (ör. hesaplanan stilleri okuma) CSS'yi de bekler — bu nedenle bir CSS dosyası dolaylı olarak bir komut dosyasını engelleyebilir, bu da ayrıştırıcıyı engeller. ## Neden Önemli - CSS'i `` içine yerleştirin (erken yükleyin); kritik CSS'i satır içi yapın. - Komut dosyalarına `defer` (veya `type="module"`) ekleyin veya `` öncesine yerleştirin. - CSS/JS'i küçültün ve sıkıştırın; kullanılmayan kuralları kaldırın. - Kritik yazı tipleri/varlıklar için `preload`, anahtar kaynaklar için `preconnect` kullanın. - Düzen tahrifi (JS'de düzeni tekrar tekrar okuma/yazma) yapmaktan kaçının — bu, ek reflow'ları zorlar. ## Neden önemli Kritik işleme yolu, First Contentful Paint ve Largest Contentful Paint gibi metrikleri belirler. CSS'in işlemeyi engellediğini ve senkron JS'in ayrıştırmayı engellediğini bilmek, `defer`/`async`, satır içi kritik CSS ve kaynak ipuçlarının sayfayı neden hızlandırdığını tam olarak söyler — bu yol kısaltırlar veya engelini kaldırırlar.