Завантаження, парсинг та застосування CSS: ключова тема в оптимізації веб-продуктивності
Завантаження, парсинг та застосування CSS є критичними темами в оптимізації веб-продуктивності. Розуміння цього процесу є важливим для оптимізації часу завантаження сторінки та покращення досвіду користувача. Нижче ми детально розглянемо, чи блокує CSS парсинг та рендеринг DOM, а також механізми, що за цим стоять.
Завантаження CSS та парсинг DOM
Парсинг DOM
- Парсинг DOM (Document Object Model) — це процес, коли браузер перетворює отриманий HTML-байт-стрім на дерево DOM.
- Під час парсингу HTML-документу, коли парсер стикається з ресурсом, який не блокує (наприклад, асинхронним скриптом), він намагається завантажити цей ресурс паралельно, продовжуючи парсити документ.
Чи блокує CSS парсинг DOM?
- CSS сам по собі не блокує парсинг DOM. Тобто браузер продовжує парсити HTML та будувати дерево DOM.
- Однак CSS блокує рендеринг DOM та виконання JavaScript. Це означає, що хоча дерево DOM може бути побудоване, браузер не виконає операції рендерингу, поки відповідний CSS не буде розібраний (тобто поки не буде побудовано дерево CSSOM). Це необхідно для того, щоб сторінка відображалася коректно на екрані, уникаючи проблем з перерахунком та перезаписом.
Коли браузер розбирає HTML для створення дерева DOM, він також завантажує CSS-файли паралельно і починає будувати CSSOM (CSS Object Model). Створення дерева DOM та CSSOM відбувається одночасно, що означає, що завантаження та парсинг CSS не блокують побудову дерева DOM.
Дерево CSSOM та рендеринг
Дерево CSSOM
- CSSOM (CSS Object Model) — це структура даних, паралельна DOM, яка містить всю CSS-інформацію для сторінки. Браузер використовує її для створення дерева рендерингу.
- Коли браузер стикається з тегом
<style>або ``
Давайте розглянемо це детально:
Безпосереднє змінення стилів елементів
Коли CSS-стилі застосовуються безпосередньо через зміну властивості style елемента DOM у JavaScript (наприклад, element.style.color = 'red';), такі дії зазвичай не блокують парсинг DOM. Однак вони можуть заблокувати процес рендерингу, оскільки браузер повинен перерахувати стилі та може викликати перерахунок розмірів (reflow) та перерисовку (repaint):
- Reflow: Виникає, коли розмір, структура або певні властивості елементів змінюються, що вимагає від браузера перерахувати їхні позиції та розміри.
- Repaint: Виникає, коли візуальний вигляд елемента змінюється (наприклад, колір або бордер) без зміни його розміру чи структури, що змушує браузер перерисувати елемент.
Динамічне вставлення...
Перекладено з: Does CSS Block Parsing and Rendering? A Detailed Analysis