В чём разница между событиями DOMContentLoaded и load?

`DOMContentLoaded` срабатывает, когда HTML полностью разобран и построен DOM, не дожидаясь стилей, изображений и подframes. `load` срабатывает, когда загружены вообще все ресурсы страницы.

document.addEventListener('DOMContentLoaded', () => {
  // DOM готов: можно искать элементы
});

window.addEventListener('load', () => {
  // загружены изображения, стили, iframe
});

Что ждёт каждое событие

• DOMContentLoaded: разбор HTML и синхронные скрипты (они блокируют разбор). Скрипты с defer выполняются до него, async — не гарантированно.
• load: плюс изображения, шрифты, таблицы стилей, iframe.

Когда что использовать

• Инициализация интерфейса, навешивание обработчиков — DOMContentLoaded (раньше и достаточно).
• Расчёты по размерам картинок, финальные метрики — load.
• Скрипт в конце <body> или с defer обычно не требует ожидания события вообще.

Связанные вещи

• document.readyState: loading → interactive (DOM готов) → complete (всё загружено).
• beforeunload и unload срабатывают при уходе со страницы.

Коротко для собеседования

DOMContentLoaded — DOM готов, ресурсы ещё могут грузиться; load — загружено абсолютно всё. Интерфейс инициализируют по первому, размеры картинок и финальные замеры — по второму.