Парсинг пайплайн - від байтів до DOM та CSSOM

Парсинг Пайплайн — це процес перетворення байтів HTML/CSS у структури даних (DOM та CSSOM), з якими може працювати браузер. Розуміння цього процесу є критично важливим для оптимізації продуктивності завантаження сторінки.

Парсинг HTML: від байтів до DOM

Етап 1: Потік байтів → Потік символів

Bytes:     3C 68 31 3E ...
           ↓ (Кодування символів)
Characters: <h1>Hello</h1>

Виявлення кодування символів:

BOM (Byte Order Mark)
HTTP заголовок Content-Type: charset=utf-8
Тег meta: <meta charset="utf-8">
Резервний варіант: автоматичне виявлення

Етап 2: Токенізація (Лексичний аналіз)

HTML парсер перетворює символи на токени:

html

<div class="container">
  <h1>Title</h1>
  <p>Text</p>
</div>

Токени:

StartTag: div (attributes: class="container")
StartTag: h1
Character: Title
EndTag: h1
StartTag: p
Character: Text
EndTag: p
EndTag: div

Етап 3: Побудова дерева

Токени перетворюються на DOM вузли і будується DOM дерево:

Document

html

head

body

div.container

Title

Text

Препроцесор — критична оптимізація

Препроцесор працює паралельно з HTML парсером і попередньо завантажує ресурси:

html

<html>
<head>
  <!-- Парсер тут -->
  <link rel="stylesheet" href="style.css">
  <script src="app.js"></script>
</head>
<body>
  <img src="hero.jpg"> <!-- Препроцесор вже знайшов це! -->

Що знаходить Препроцесор:

<link rel="stylesheet">
<script src>
<img src>
<link rel="preload">

Парсинг CSS: Побудова CSSOM

Етап 1: Токенізація CSS

css

body {
  color: blue;
  font-size: 16px;
}

Токени:

Selector: body
Property: color
Value: blue
Property: font-size
Value: 16px

Етап 2: Побудова CSSOM

StyleSheetList

body color:blue font-size:16px

.container width:1200px

h1 font-weight:bold

Блокування CSS

CSS блокує рендеринг!

html

<head>
  <link rel="stylesheet" href="style.css"> <!-- Блокує! -->
</head>
<body>
  <!-- Контент не буде рендеритись, поки CSS не завантажиться -->

Рішення — медіа-запити:

html

<link rel="stylesheet" href="print.css" media="print"> <!-- Не блокує екран -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Побудова дерева рендерингу

DOM + CSSOM = Дерево рендерингу

html

<div style="display:none">Hidden</div>
<div class="visible">Visible</div>

Дерево рендерингу містить лише видимі елементи:

display: none — не в Дереві рендерингу
visibility: hidden — в Дереві рендерингу (займає місце)
<head>, <script>, <meta> — не в Дереві рендерингу

DOM Tree

Render Tree

CSSOM

Layout Tree

Paint

Спекулятивний парсинг

Сучасні браузери використовують спекулятивний парсинг:

html

<script src="slow.js"></script> <!-- Блокує парсинг -->
<img src="image1.jpg">
<img src="image2.jpg">

Без спекулятивного парсингу:

Парсинг зупиняється на <script>
Чекає на завантаження та виконання
Продовжує парсинг

З спекулятивним парсингом:

Парсинг зупиняється на <script>
Але спекулятивний потік продовжує парсинг
Знаходить image1.jpg, image2.jpg і починає завантаження!

Найкращі практики продуктивності

Мінімізуйте CSS

CSS блокує рендеринг. Використовуйте критичний CSS вбудовано для контенту над згином.

Використовуйте async/defer для скриптів

Не блокуйте парсинг. <script defer> не блокує.

Допоможіть Препроцесору

Використовуйте <link rel="preload"> для критичних ресурсів.

Уникайте document.write()

Повністю порушує спекулятивний парсинг! Резюме:

Парсинг Пайплайн — це складний багатоступеневий процес з багатьма оптимізаціями (Препроцесор, Спекулятивний парсинг). Розуміння цього процесу допомагає писати HTML/CSS, які завантажуються швидше.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань