Tarayıcı web sayfasını nasıl işler?

Bir tarayıcı tarafından bir web sayfasının işlenme süreci birkaç aşamaya bölünebilir:

1. İstek ve kaynak alma:

   • Kullanıcı URL'yi adres çubuğuna yazar veya bir bağlantıya tıklar.
   • Tarayıcı, sunucuya HTTP isteği gönderir.
   • Sunucu, isteği işler ve genellikle bir HTML belgesi içeren yanıt gönderir.

2. Sözdizimi analizi (Parsing):

   • Tarayıcı, HTML belgesini baytlar şeklinde alır.
   • Bu baytlar, belirtilen kodlama kullanılarak karakterlere çözülür.
   • HTML ayrıştırıcı, belgeyi karakter karakter analiz eder ve DOM (Document Object Model) ağacını oluşturur. DOM, belgenin mantıksal yapısını temsil eder.
   • <link> (CSS için) veya <script> (JavaScript için) etiketleri tespit edildiğinde, tarayıcı bu kaynakları HTML ayrıştırmasıyla paralel olarak indirmeye başlar.

3. CSSOM Oluşumu:

   • CSS ayrıştırıcı, <style>, <link> ve satır içi stillerden CSS kurallarını analiz eder.
   • Bu kurallara dayanarak, sayfadaki her öğe için tüm stilleri içeren CSSOM (CSS Nesne Model) ağacı oluşturulur.

4. Render Ağacının Oluşumu:

   • Render Ağacı, DOM ve CSSOM'u birleştirir. Sadece sayfada gösterilecek öğeleri ve bunlara ait stilleri içerir.
   • display: none; CSS kuralı olan öğeler Render Ağacı'na dahil edilmez.

5. Yerleşim (Layout / Reflow):

   • Tarayıcı, Render Ağacı temel alınarak her öğenin sayfadaki tam geometrik boyutlarını ve konumlarını hesaplar. Bu işleme Layout veya Reflow denir.
   • Layout, ilk Render Ağacı oluşturulurken ve pencere boyutu değişikliklerinde, öğe ekleme/silme veya stiller değiştiğinde gerçekleşir.

6. Çizim (Painting / Repaint):

   • Tarayıcı, Render Ağacı ve Layout sonucu bilgileri kullanarak her öğeyi ekranda çizer.
   • Görünen özelliklerde (renk, arka plan, opaklık gibi) değişiklikler olduğunda, bu aşama Repaint olarak adlandırılır.

7. Bileşim (Compositing):

   • Çizilen öğeler, performans ve animasyon optimizasyonu için farklı katmanlara ayrılabilir.
   • Bu katmanlar, ekran üzerinde nihai sayfayı göstermek için birleştirilir.

8. Betiklerin çalıştırılması:

   • HTML ayrıştırıcı <script> etiketiyle karşılaştığında, HTML ayrıştırma işlemi duraklatılır (varsayılan olarak), ve tarayıcı JavaScript kodunu indirir, analiz eder ve çalıştırır.
   • JavaScript, DOM ve CSSOM'u değiştirebilir, bu da tekrar Layout ve Painting adımlarını tetikleyebilir.
   • <script> etiketi için async ve defer öznitelikleri, betiklerin yürütülme sırasını ve zamanlamasını etkiler, böylece HTML ayrıştırmasına devam edilebilir.

İşte bu akışın yaklaşık bir görselleştirmesi:

HTTP İsteği
↓
HTML Baytları
↓
HTML Ayrıştırıcı
→ CSS Ayrıştırıcı (paralel)
    ↓           ↓
    DOM Ağacı  CSSOM Ağacı
          ↓
     Render Ağacı
          ↓
        Layout
          ↓
       Çizim
          ↓
     Bileşim
          ↓
   Ekran Görüntüsü

JavaScript yürütme, farklı aşamalarda kesintiye uğrayabilir ve tekrar adımlarına neden olabilir:

HTML Ayrıştırıcı + `<script>` etiketi
↓
HTML Ayrıştırma duraklatılır
↓
Betik indirilir
↓
Betik analiz edilir
↓
Betik çalıştırılır
↓
(Dom/CSSOM değişebilir → Layout/Çizim tetiklenir)
↓
HTML Ayrıştırma devam eder

Bu süreci anlamak, web sayfalarının performansını optimize etmek için önemlidir.