Layout thrash: форсированная синхронная компоновка

Resize-обработчик итерирует 5000 строк. Каждая строка читает свою ширину, затем записывает новую. Страница блокируется на 5 секунд. CPU не делает ничего экзотического — он запускает один и тот же расчёт компоновки 5000 раз, по разу на строку, потому что никто не сказал ему батчить.

Как работает форсированная синхронная компоновка

Компоновка управляется dirty-флагами: браузер батчит записи стилей и сбрасывает их только когда нужна свежая геометрия. Патологический случай — цикл чтение-запись в JS:

for (const row of rows) {
  const w = row.offsetWidth;        // чтение → форсирует сброс ожидающих записей
  row.style.width = w + 10 + 'px'; // запись → снова помечает компоновку dirty
}

Каждая итерация заставляет браузер вычислять компоновку для ответа на offsetWidth, затем немедленно помечает компоновку dirty для следующей итерации. N строк = N полных компоновок.

Список из 5000 строк при 1 мс на компоновку = 5 секунд блокировки главного потока. DevTools показывает это как фиолетовую Layout-полосу с предупреждением в консоли «Forced reflow while executing JavaScript took XX ms».

Двухпроходное батч-лечение

Разделите все чтения и все записи:

// Двухпроходный батч: сначала читаем, потом пишем.
const widths = [];
for (const row of rows) {
  widths.push(row.offsetWidth);          // проход 1: все чтения
}
for (let i = 0; i < rows.length; i++) {
  rows[i].style.width = (widths[i] + 10) + 'px'; // проход 2: все записи
}

Поскольку ни одно чтение не следует за записью в одном цикле, браузер батчит все записи и выполняет один проход компоновки для всего батча. Временная сложность падает с O(N × компоновка) до O(компоновка).

Общее правило: в любой функции, трогающей геометрию, сначала все чтения, потом все записи.

Если разделить чтения от записей невозможно, кэшируйте ширину при монтировании компонента и пересчитывайте только при реальном изменении размера родителя.

Свойства, вызывающие форсированную компоновку

Любое свойство, возвращающее вычисленную геометрию, форсирует сброс компоновки при чтении. Полный список включает:

offsetWidth, offsetHeight, offsetTop, offsetLeft, offsetParent, clientWidth, clientHeight, clientTop, clientLeft, scrollWidth, scrollHeight, scrollTop, scrollLeft, getBoundingClientRect(), getComputedStyle(), scrollIntoView(), focus() (иногда).

[Violation] Forced reflow while executing JavaScript took 42 ms
  at applyRowWidths (list.js:88)
  at handleResize (list.js:34)
  at window.onresize (list.js:12)

[Violation] Forced reflow while executing JavaScript took 47 ms
  at applyRowWidths (list.js:88)
  at handleResize (list.js:34)
  at window.onresize (list.js:12)

[Violation] Forced reflow while executing JavaScript took 51 ms
  at applyRowWidths (list.js:88)
  ...