OrtaTarayıcı & Web API'leriFrontend

Tarayıcının kritik render yolu (critical rendering path) nedir?

Cevap

Tarayıcının HTML'i ekranda piksele dönüştürme adımlarıdır:

  1. HTML → DOM ağacı oluşturulur
  2. CSS → CSSOM oluşturulur (CSS render'ı bloklar)
  3. DOM + CSSOM birleşerek Render Tree oluşur (görünmeyen elemanlar hariç)
  4. Layout: her elemanın boyut ve konumu hesaplanır
  5. Paint ve Composite: pikseller boyanır, katmanlar birleştirilir

Hızlandırmak için:

  • Kritik CSS'i satır içi vermek, geri kalanını geç yüklemek
  • Script'leri defer veya async ile yüklemek (parser'ı bloklamaz)
  • İlk ekrandaki büyük görseli preload / fetchpriority="high" ile önceliklendirmek
  • Gereksiz web fontlarından kaçınmak, font-display: swap kullanmak

Mülakat Defteri editörleri ·

  1. Bir URL'yi tarayıcıya yazıp Enter'a bastığınızda neler olur?OrtaTarayıcı & Web API'leriFrontend
  2. Web Worker nedir? Service Worker'dan farkı nedir?ZorTarayıcı & Web API'leriFrontend
  3. IntersectionObserver ne işe yarar? Örnek kullanım verin.OrtaTarayıcı & Web API'leriFrontend
  4. Tarayıcı önbelleği nasıl çalışır? Cache-Control başlıkları nelerdir?OrtaTarayıcı & Web API'leriFrontend
  5. localStorage, sessionStorage, cookie ve IndexedDB arasındaki farklar nelerdir?OrtaTarayıcı & Web API'leriFrontend
  6. script etiketinde async ile defer arasındaki fark nedir?KolayTarayıcı & Web API'leriFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle