Что такое DOMContentLoaded и load?

События DOMContentLoaded и load играют ключевую роль в жизненном цикле загрузки веб-страницы, и понимание разницы между ними критически важно для фронтенд-разработчика. Событие DOMContentLoaded срабатывает на объекте document тогда, когда HTML полностью загружен и разобран, а дерево DOM полностью построено. При этом браузер не дожидается загрузки стилей, изображений и подгружаемых фреймов. Это делает DOMContentLoaded идеальным моментом для инициализации интерактивных элементов интерфейса, навешивания обработчиков событий и выполнения базовой логики скриптов, которым не нужны размеры изображений.

Событие load, в свою очередь, срабатывает на объекте window немного позже, когда полностью загружены не только HTML и DOM-дерево, но и все сопутствующие ресурсы: таблицы стилей, скрипты, изображения и сторонние фреймы. Поскольку загрузка тяжелой графики может занять заметное время, load происходит значительно позже, чем DOMContentLoaded.

На практике DOMContentLoaded срабатывает гораздо быстрее, что позволяет улучшить воспринимаемую пользователем скорость работы сайта. Чтобы скрипты выполнялись вовремя и не блокировали отрисовку страницы, часто используют атрибут defer для тега script, который указывает браузеру загружать скрипт асинхронно в фоне и выполнять его сразу после того, как DOMContentLoaded будет завершен.

Для проверки текущего состояния загрузки документа в любой момент времени можно использовать свойство document.readyState. Оно принимает три возможных значения: loading, когда документ еще загружается; interactive, когда документ полностью прочитан и разобран (что соответствует моменту перед событием DOMContentLoaded); и complete, когда все ресурсы полностью загружены (что соответствует моменту перед событием load). Это свойство удобно использовать в универсальных функциях, которые должны выполняться независимо от того, успел ли документ загрузиться до подключения скрипта.