Ответ
Рендеринг браузера — это многоэтапный конвейер (рендер-пайплайн), преобразующий HTML, CSS и JS в пиксели на экране.
Ключевые этапы:
- Парсинг и построение деревьев:
- DOM (Document Object Model): Создается из HTML.
- CSSOM (CSS Object Model): Создается из CSS.
- Построение Render Tree: Объединение DOM и CSSOM. Элементы, скрытые (например,
display: none), в него не попадают. - Layout (или Reflow): Вычисление точного положения и размеров каждого элемента в Render Tree.
- Paint: Заполнение пикселей (растеризация) — отрисовка текста, цветов, изображений, теней и т.д.
- Composite: Компоновка отдельных слоев (если они есть) в окончательное изображение на экране.
Пример HTML, инициирующего рендеринг:
<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; font-weight: bold; }
</style>
</head>
<body>
<p>Hello World</p> <!-- Этот элемент пройдет все этапы пайплайна -->
</body>
</html>Оптимизация для производительности:
- Избегайте синхронных "layout thrashing": Чтение геометрических свойств (offsetWidth, getBoundingClientRect) после их записи заставляет браузер выполнять принудительный синхронный layout.
- Используйте
transformиopacityдля анимаций: Они выполняются на этапе composite, минуя затратные layout и paint. - Сокращайте область перерисовки (Paint): Используйте
will-changeилиtransform: translateZ(0)для создания отдельного слоя.