Tarayıcı HTML dosyasını nasıl ayrıştırır?

Tarayıcı, HTML dosyasını bayt bayt okur. Dosyanın kodlamasına göre karakter akışı oluşturulur. Bu akış, tokenler (açılış ve kapanış etiketi, metin, yorum, doctype) oluşturarak ayrıştırılır. Tokenler, düğümlere (nodes) dönüştürülür ve ağaç halinde bağlanır: Belge Nesne Modeli (DOM).

Ayrıştırma süreci şu aşamalardan geçer:

Baytların okunması: Tarayıcı, bir bayt akışı alır.
Kodlamanın belirlenmesi: Dosyanın kodlaması belirlenir (örneğin, UTF-8, Windows-1251). Bu, HTTP başlıkları, <meta> etiketleri veya otomatik tespit yoluyla olabilir.
Karakterlere dönüştürme: Baytlar, belirlenen kodlamaya uygun olarak karakterlere dönüştürülür.

Tokenizasyon: Karakter akışı, tokenlere bölünür.

<!-- Token örneği -->
<p> // Token: açılış etiketi "p"
  Merhaba, // Token: metin "Merhaba, "
  dünya! // Token: metin "dünya!"
</p> // Token: kapanış etiketi "p"

AST (DOM Ağacı) oluşturma: Token dizisi temel alınarak bir düğüm ağacı (DOM) inşa edilir. Tarayıcı, açık etiketleri tutan bir yığın (stack) kullanır; kapanış etiketiyle karşılaştığında, yığındaki karşılık gelen etiketi kapatır ve düğümünü ağaç yapısına ekler.

<!-- Basit DOM yapısı örneği: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Örnek</title>
  </head>
  <body>
    <p>Metin</p>
  </body>
</html>

// DOM ağacı, etiketlerin iç içe geçmesini yansıtacak şekilde yapılandırılır.
// Örneğin, "p" düğümü, "body" düğümünün çocuğu olur.

Betik ve stil dosyalarının ayrıştırılması: HTML ayrıştırması sırasında, tarayıcı <script> ve <link>/<style> etiketleriyle karşılaşır.
- <script>: Varsayılan olarak, HTML ayrıştırması duraklatılır, betik yüklenir, ayrıştırılır ve çalıştırılır. Çalıştırmadan sonra, HTML ayrıştırması devam eder. async ve defer öznitelikleri bu davranışı değiştirir. async, betiği asenkron olarak çalıştırır, ayrıştırmayı engellemez. defer, betiğin çalıştırılmasını, HTML ayrıştırması tamamlanana kadar erteler.
- <link> / <style>: CSS, HTML ile paralel olarak ayrıştırılır ve CSS Nesne Modeli (CSSOM) oluşturur. <link>'in <script> öncesinde olması, betiğin çalışmasını geciktirebilir çünkü tarayıcı, CSSOM'un oluşturulmasını bekleyebilir, böylece stil uygulaması doğru şekilde yapılmadan betik çalıştırılmaz.