Вопрос с собеседования · Frontend

Как браузер отрисовывает страницу и чем reflow отличается от repaint?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Что такое критический путь рендеринга?
  • Почему анимировать transform лучше, чем top и left?
Коротко

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии (цвет), дешевле.

  • transform и opacity меняются на этапе композиции — без layout и paint
  • Чтение offsetHeight после записи стилей вызывает принудительный синхронный reflow
  • CSS блокирует отрисовку, синхронный script — разбор HTML

А ещё Чередование чтений и записей в цикле — layout thrashing

Подробно

Этапы:

  1. Разбор HTML в DOM; встретив синхронный <script>, парсер останавливается, пока скрипт не загрузится и не выполнится.
  2. CSSOM — стили; пока CSS не загружен, страница не отрисовывается.
  3. Дерево отрисовки — видимые элементы с вычисленными стилями.
  4. Layout — размеры и позиции каждого блока.
  5. Paint — заполнение пикселей по слоям.
  6. Composite — сборка слоёв, часто на GPU.

Что вызывает reflow: изменение размеров, шрифтов, содержимого, добавление элементов, чтение геометрии (offsetWidth, getBoundingClientRect) после изменений.

Layout thrashing:

for (const el of items) {
  el.style.width = box.offsetWidth + "px";   // чтение после записи — reflow на каждой итерации
}
// сначала все чтения, потом все записи
const w = box.offsetWidth;
for (const el of items) el.style.width = w + "px";

Анимации: transform и opacity обрабатываются компоновщиком — плавно даже при занятом основном потоке. will-change подсказывает вынести элемент в свой слой (не злоупотреблять: слои стоят памяти).

Что хотят услышать

  • Этапы конвейера.
  • Reflow, repaint, composite.
  • Как избегать лишних reflow.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Изменение цвета вызывает reflow, а изменение ширины — только repaint без пересчёта
  • ✗transform всегда вызывает reflow
  • ✗Браузер рисует страницу до построения DOM
  • ✓DOM и CSSOM → layout → paint → composite; reflow пересчитывает геометрию, repaint — без неё

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования