Какие события жизненного цикла HTML-страницы существуют

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

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

Как отвечать

Выстройте события в порядке жизни страницы:

• readystatechange: document.readyState проходит loading, interactive, complete. Проверка readyState нужна, если скрипт может подключиться уже после загрузки;
• DOMContentLoaded: HTML разобран, скрипты с defer и модули выполнены. Картинки не ждёт, но синхронный скрипт ждёт стили перед собой, поэтому CSS косвенно задерживает и это событие;
• load на window: загружено всё, включая картинки, шрифты и iframe;
• visibilitychange: вкладку скрыли или показали, document.visibilityState равно hidden или visible. На мобильных это последнее надёжное событие перед выгрузкой;
• pagehide и pageshow: уход и возврат. Поле event.persisted показывает, что страница восстановлена из bfcache без перезагрузки;
• beforeunload: предупреждение о несохранённых данных через event.preventDefault(). Свой текст браузеры не показывают, а диалог появится, только если пользователь взаимодействовал со страницей;
• unload: устарел. Мешает bfcache, на мобильных часто не срабатывает, а Chrome постепенно его отключает.

Можно упомянуть Page Lifecycle API в Chromium с событиями freeze и resume. Данные при уходе отправляют через navigator.sendBeacon или fetch с keepalive: true в обработчике visibilitychange.

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

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

Отправляют аналитику в unload обычным fetch. Запрос обрывается, а сам обработчик ещё и выключает bfcache.

Пишут event.returnValue = "Вы уверены?" и ждут, что пользователь увидит этот текст. Браузеры показывают стандартное сообщение, а обработчик beforeunload стоит добавлять только при несохранённых изменениях, а не держать постоянно.