Как работает браузер с DOM и какие процессы происходят при рендеринге?

Что проверяют

Знаете ли вы конвейер рендеринга целиком, включая композитинг, и понимаете ли, какие действия из JS заставляют браузер пересчитывать layout.

Как отвечать

• Парсинг HTML в DOM идёт потоково. Синхронный <script> без defer и async останавливает парсер, потому что скрипт может менять документ.
• CSS блокирует не парсинг, а отрисовку: пока CSSOM не построен, браузер не показывает содержимое.
• DOM и CSSOM соединяются в дерево рендеринга (в Blink это layout tree). Элементы с display: none в него не попадают, visibility: hidden попадает и занимает место.
• Дальше layout считает геометрию, paint формирует команды отрисовки, compositing собирает слои, часть работы уходит на GPU. Последний шаг обычно теряют, а он объясняет, почему transform и opacity анимируются дёшево: они не трогают layout и paint.
• Изменение width или top вызывает reflow ветки, background-color обходится repaint.
• Прикладной вывод: чтение геометрии (offsetHeight, getBoundingClientRect, getComputedStyle) заставляет браузер синхронно досчитать layout. Чередование записи и чтения в цикле даёт layout thrashing.

// плохо: чтение после каждой записи
items.forEach(el => { el.style.width = el.offsetWidth + 10 + "px" });
// хорошо: сначала все чтения, потом все записи
const widths = items.map(el => el.offsetWidth);
items.forEach((el, i) => { el.style.width = widths[i] + 10 + "px" });

• Кадр рисуется после текущей задачи и всех микрозадач: правки под анимацию ставьте в requestAnimationFrame, тяжёлые вычисления уводите в Web Worker.

Где спотыкаются

Останавливаются на layout и paint, забыв композитинг, и потом не могут объяснить, чем анимация transform лучше анимации left.

Говорят, что CSS блокирует парсинг HTML. Он блокирует отрисовку, а парсер останавливает синхронный скрипт.

Считают дорогими сами вызовы DOM API. Дорог не вызов, а вынужденный пересчёт: браузер копит изменения, пока результат никто не читает.

Путают reflow и repaint и не могут назвать ни одного свойства, которое обходится без пересчёта геометрии.