Hogyan elemzi a böngésző a HTML-fájlt?

A böngésző byte-onként olvassa a HTML fájlt. A fájl kódolása alapján karakterfolyam épül fel. Ezt a folyamatot tokenek (nyitó és záró tag, szöveg, megjegyzés, doctype) formájában elemzi. A tokenek átalakulnak csomópontokká (nodes), amelyek egy fába (Document Object Model, DOM) kapcsolódnak.

A parse folyamat a következő szakaszokon megy keresztül:

Byte-ok olvasása: A böngésző byte-áramlást kap.
Kódolás meghatározása: A fájl kódolását meghatározzák (pl. UTF-8, Windows-1251). Ez HTTP fejléc, <meta> címke vagy automatikus felismerés útján történhet.
Átalakítás karakterekké: A byte-okat a meghatározott kódolás szerint alakítják át karakterekké.

Tokenizálás: A karakterfolyam tokenekre bontódik.

<!-- Token példa -->
<p> // Token: nyitó tag "p"
  Szia, // Token: szöveg "Szia, "
  világ! // Token: szöveg "világ!"
</p> // Token: záró tag "p"

AST (DOM fa) építése: A tokenek sorozatából egy csomópontfa (DOM) épül. A böngésző nyitott tagek stackjét tartja; amikor záró tageket talál, lezárja a megfelelő nyitott tageket a stacken, és hozzáadja a csomópontot a fához.

<!-- Egyszerű DOM struktúra például: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Példa</title>
  </head>
  <body>
    <p>Szöveg</p>
  </body>
</html>

// A DOM fa olyan struktúrát fog mutatni, ami a tagek beágyazottságát tükrözi.
// Például, a "p" csomópont a "body" csomópont gyermeke lesz.

Szkriptek és stílusok elemzése: HTML elemzése közben a böngésző találkozik a <script> és <link>/<style> tagekkel.
- <script>: Alapértelmezés szerint a HTML elemzés szünetel, a script betöltődik, elemződik és végrehajtódik. A végrehajtás után a HTML elemzés folytatódik. Az async és defer attribútumok módosítják ezt a viselkedést. Az async aszinkron módon futtatja a scriptet, nem blokkolva az elemzést. A defer késlelteti a script végrehajtását a HTML elemzés befejezéséig.
- <link> / <style>: A CSS párhuzamosan elemződik a HTML-lel, és létrehozza a CSS Object Modelt (CSSOM). A <link> megléte a <script> előtt késleltetheti a script végrehajtását, mivel a böngésző várhat a CSSOM felépítésére, hogy biztosítsa a stílusok helyes alkalmazását a script végrehajtása előtt.