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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Домклик

Стек: JavaScript

> Пример ответа

Основные события жизненного цикла HTML-страницы делятся на три этапа: загрузка, работа с DOM и выгрузка.

DOMContentLoaded - срабатывает, когда HTML полностью загружен и разобран, без ожидания CSS, изображений и фреймов. Это сигнал, что DOM готов к манипуляциям.
load - наступает после полной загрузки всей страницы, включая стили, картинки и другие ресурсы. Используется для инициализации, когда всё точно доступно.
beforeunload - возникает перед закрытием или перезагрузкой страницы. Позволяет запросить подтверждение у пользователя (например, при несохранённых данных).
unload - срабатывает при окончательном уходе со страницы. Используется для очистки ресурсов (например, закрытия WebSocket-соединений), но с ограничениями в современных браузерах.

Также стоит упомянуть readystatechange - событие, отслеживающее состояние document.readyState (loading, interactive, complete), что даёт более детальный контроль.

Пример использования:

JAVASCRIPT
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов');
});

window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
});