Как работает браузер: рендеринг, Event Loop, анимация

Один процесс на сайт, внутри — несколько потоков. Вся тема — про борьбу за main thread.

Critical Rendering Path — последовательность, которую спрашивают почти дословно.

Не каждое изменение проходит весь конвейер. От свойства зависит цена.

Любимая ловушка: чтение геометрии после записи форсит синхронный пересчёт.

for (const el of items) {
  el.style.height =
    el.offsetHeight + 10 + 'px';
  // read offsetHeight ⇄ write
}

const hs = items.map(
  el => el.offsetHeight);   // все чтения
items.forEach((el, i) =>
  el.style.height = hs[i]+10+'px'); // записи

DOMContentLoaded ≠ load. Частый вопрос — кто чего ждёт.

Один оборот (tick) — и из него растут все задачки «что выведется».

console.log('1');
setTimeout(() => console.log('2'));             // макро
Promise.resolve().then(() => console.log('3')); // микро
console.log('4');
// → 1, 4, 3, 2   (микро 3 раньше макро 2)

Рендер ≠ только paint. Порядок важен.

Главный вопрос темы. Тяжёлый синхронный JS заблокировал main thread.

/* Переживёт тяжёлый JS — на compositor */
.spinner{ animation:spin 1s linear infinite; will-change:transform; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Замрёт — left идёт через layout на main thread */
.bad{ animation:move 1s linear infinite; }
@keyframes move{ to{ left:300px; } }

Та самая «магия слоя», на которой держится плавная анимация.

Корень тормозов один — занятый поток. Приёмы из него же.

Язык, которым меряют «успел ли браузер».

Из нашей базы 2000+ собесов — формулировки повторяются.

Каверзные follow-up