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

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

Понимаете ли вы, как браузер разбирает страницу и в какой момент уже можно трогать DOM. Следом обычно спрашивают, как на эти события влияют defer и async, и что будет, если подписаться на DOMContentLoaded после того, как оно уже произошло.

Как отвечать

• DOMContentLoaded: срабатывает на document, когда HTML полностью разобран и выполнены все синхронные и отложенные скрипты (defer, а также type="module", которые отложены по умолчанию). Картинки, iframe и async-скрипты оно не ждёт;
• load: срабатывает на window, когда загружено всё: изображения, стили, iframe и прочие подресурсы. Картинки с loading="lazy" за пределами экрана его не задерживают;
• стили: сами по себе DOMContentLoaded не держат, но синхронный скрипт после <link rel="stylesheet"> ждёт загрузки CSS, потому что может читать стили. Так тяжёлый CSS косвенно откладывает и DOMContentLoaded;
• document.readyState: сначала loading, затем interactive (прямо перед DOMContentLoaded), затем complete (перед load).

Практическое правило: инициализацию интерфейса вешают на DOMContentLoaded или просто подключают скрипт с defer, тогда событие вообще не нужно. load нужен редко: когда требуются реальные размеры картинок или содержимое iframe.

Хороший штрих: проверка document.readyState === 'loading' перед подпиской для скриптов, которые могут загрузиться поздно, например встраиваемых виджетов. В DevTools оба момента видны на вкладке Network синей и красной вертикальными линиями. Для оценки скорости сейчас смотрят не на них, а на Core Web Vitals: LCP, INP и CLS.

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

Утверждают, что DOMContentLoaded ждёт стили и картинки, или что load наступает сразу за ним. На тяжёлой странице между ними проходят секунды.

Подписываются на событие в скрипте, который подгружается динамически или с async, и не понимают, почему обработчик не вызвался. Событие уже прошло, повторно оно не приходит, спасает проверка readyState.

Пишут document.addEventListener('load', ...) в расчёте на загрузку всей страницы. Это событие приходит на window, а обработчик на document для страницы не сработает.