Рендеринг

Каждый кадр, который видит пользователь, — результат цепочки шагов. Браузер разбирает HTML в DOM, CSS — в CSSOM, объединяет их в дерево отображения, вычисляет геометрию блоков, закрашивает их и склеивает слои на видеокарте. Любое изменение на странице — новый класс, сдвиг блока, подгрузка картинки — запускает часть этой цепочки заново. Насколько большую часть, зависит от того, что именно поменялось.

Слово используют и шире: говорят о серверном и клиентском рендеринге. Здесь речь о том, где собирается HTML. При серверном варианте браузер получает готовую разметку, при клиентском — пустой каркас и скрипт, который строит страницу сам. Это важно и для скорости, и для поиска: роботу проще прочитать готовый HTML, о чём подробно в статье про JavaScript SEO.

Этапы конвейера

• Стили. Для каждого элемента вычисляются итоговые значения свойств.
• Компоновка (layout). Считаются размеры и координаты. Её повторный запуск называют перерасчётом компоновки.
• Отрисовка (paint). Блоки превращаются в пиксели: текст, фон, рамки, тени.
• Композитинг. Готовые слои накладываются друг на друга. Анимации transform и opacity обычно затрагивают только этот шаг, поэтому идут плавно.

Пример лишней работы

Скрипт, который по очереди читает размеры и тут же их меняет, заставляет браузер пересчитывать раскладку на каждой итерации:

const cards = [...document.querySelectorAll('.card')];
// Медленно: чтение и запись чередуются
cards.forEach(el => {
  el.style.height = el.offsetWidth / 2 + 'px';
});
// Быстрее: сначала все чтения, потом все записи
const widths = cards.map(el => el.offsetWidth);
cards.forEach((el, i) => {
  el.style.height = widths[i] / 2 + 'px';
});

Как увидеть узкие места

Во вкладке Performance инструментов разработчика Chrome запись показывает, сколько времени заняли Recalculate Style, Layout и Paint. Длинные фиолетовые и зелёные полосы подсказывают, где искать лишние перерасчёты и тяжёлые эффекты. Такой разбор — обычная часть работ по ускорению сайта.