Загрузка...

Parsing Pipeline - от байтов до DOM и CSSOM

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

HTML Parsing: от байтов до DOM

Этап 1: Byte Stream → Character Stream

Bytes:     3C 68 31 3E ...
           ↓ (Character Encoding)
Characters: <h1>Hello</h1>

Character Encoding Detection:

BOM (Byte Order Mark)
HTTP Content-Type header: charset=utf-8
Meta tag: <meta charset="utf-8">
Fallback: автоопределение

Этап 2: Tokenization (Лексический анализ)

HTML parser

преобразует символы в токены:

<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: Tree Construction

Токены преобразуются в DOM nodes и строится DOM tree:

Preload Scanner — Критическая оптимизация

Preload Scanner работает параллельно с HTML parser и предзагружает ресурсы:

<html>
<head>
  <!-- Parser здесь -->
  <link rel="stylesheet" href="style.css">
  <script src="app.js"></script>
</head>
<body>
  <img src="hero.jpg"> <!-- Preload Scanner уже нашёл это! -->

Что находит Preload Scanner:

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

CSS Parsing: построение CSSOM

Этап 1: CSS Tokenization

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

Токены:

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

Этап 2: CSSOM Construction

CSS Blocking

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

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

Решение — Media Queries:

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

Построение Render Tree

DOM + CSSOM = Render Tree

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

Render Tree содержит только видимые элементы:

display: none — не в Render Tree
visibility: hidden — в Render Tree (занимает место)
<head>, <script>, <meta> — не в Render Tree

Speculative Parsing

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

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

Без Speculative Parsing:

Парсинг останавливается на <script>
Ждём загрузки и выполнения
Продолжаем парсинг

Со Speculative Parsing:

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

Performance Best Practices

Минимизируйте CSS

CSS блокирует рендеринг. Используйте critical CSS inline для первого экрана.

Используйте async/defer для скриптов

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

Помогите Preload Scanner

Используйте <link rel="preload"> для критических ресурсов.

Избегайте document.write()

Полностью ломает Speculative Parsing!

Итог:

Parsing Pipeline — сложный многоступенчатый процесс с множеством оптимизаций (Preload Scanner, Speculative Parsing). Понимание этого процесса помогает писать HTML/CSS, который загружается быстрее.

Связанные статьи

Дальше

Содержание

HTML Parsing: от байтов до DOM Этап 1: Byte Stream → Character Stream Этап 2: Tokenization (Лексический анализ)Этап 3: Tree Construction Preload Scanner — Критическая оптимизация CSS Parsing: построение CSSOM Этап 1: CSS Tokenization Этап 2: CSSOM Construction CSS Blocking Построение Render Tree Speculative Parsing Performance Best Practices Связанные статьи