DOMContentLoaded, load и порядок загрузки

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Браузер не ждёт, пока приедет весь HTML. Он разбирает его потоком: прочитал кусок разметки — достроил кусок дерева. Поэтому «страница» существует в нескольких состояниях подряд, и код, запущенный в разные моменты, видит разные документы.

Обычный <script> без атрибутов останавливает разбор: пока скрипт выполняется, дерево не растёт. Скрипт с defer ждёт конца разбора и выполняется прямо перед DOMContentLoaded. Картинки же не блокируют ничего — их ждёт только load.

Момент	Что уже есть	Событие
Пришли первые байты HTML	пустой документ, readyState = loading	—
Парсер идёт по разметке	часть дерева выше текущей строки	—
Разметка разобрана до конца	всё дерево, скрипты с defer отработали	DOMContentLoaded
Догрузились картинки, стили, фреймы	страница целиком	load

js

console.log(document.readyState !== "loading");
console.log(document.querySelector("#title").textContent);

страница примера

Сначала предположите, что выведет код

Скрипт в <head> выполняется раньше, чем парсер дошёл до <body>. Для него кнопки, формы и футера в документе просто не существует — не «они пустые», а их нет. querySelector в этом случае возвращает null, и это не сбой, а честный ответ.

js

console.log(document.querySelector("#intro").textContent);
console.log(document.querySelector("#footer"));

страница примера

Сначала предположите, что выведет код

Падает код обычно не на самом поиске, а строкой ниже — когда у null просят свойство. Сообщение вида «Cannot read properties of null» почти всегда означает не опечатку в селекторе, а неверный момент запуска.

js

try {
  document.querySelector("#not-parsed-yet").textContent = "готово";
} catch (error) {
  console.log(error instanceof TypeError);
  console.log(document.querySelector("#app").textContent);
}

страница примера

Сначала предположите, что выведет код

Атрибуты подключения решают ту же задачу, что и обработчик DOMContentLoaded, только на уровне разметки. Для собственного кода страницы почти всегда правильный ответ — defer или модуль. Чем три способа отличаются по моменту выполнения и по порядку, целиком разбирает следующая статья — «defer, async и куда ставить скрипт».

js

// Скрипт с defer видит документ целиком и не тормозит разбор разметки
console.log(typeof document.querySelector);

страница примера

Сначала предположите, что выведет код

DOMContentLoaded срабатывает на document и означает одно: разметка разобрана, дерево построено, отложенные скрипты выполнены. Картинки при этом могут висеть наполовину скачанными, и это нормально — их размеры ещё неизвестны.

js

const pixel = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
const img = document.createElement("img");

img.addEventListener("load", () => {
  console.log("2: файл картинки загружен");
  console.log(img.complete);
});

img.src = pixel;
document.querySelector("#gallery").append(img);
console.log("1: разметка уже готова");

страница примера

Сначала предположите, что выведет код

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

DOMContentLoaded — про разметку, load — про всё остальное. Если вы не измеряете картинку и не лезете внутрь фрейма, вам нужен первый.

События рассказывают о переходе, а document.readyState — о текущем состоянии. Значения три: loading — разметка ещё разбирается, interactive — дерево готово (это момент DOMContentLoaded), complete — догрузилось всё (момент load).

js

const state = document.readyState;
console.log(state === "interactive" || state === "complete");
console.log(state === "loading");

страница примера

Сначала предположите, что выведет код

Это важно, потому что события не помнят прошлое: подписаться на уже случившийся DOMContentLoaded — то же самое, что ждать поезд, который уехал. Промис бы отдал результат, событие — нет. Поэтому код, который может подключиться поздно (скрипт из библиотеки, виджет, вставка от третьей стороны), сначала спрашивает readyState.

js

function onReady(handler) {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", handler);
  } else {
    handler();
  }
}

onReady(() => {
  console.log(document.querySelector("#save").textContent);
});

страница примера

Сначала предположите, что выведет код

Последнее событие в жизни страницы — beforeunload на window. Вызов preventDefault() внутри обработчика просит браузер показать диалог «уйти или остаться». Свой текст туда не подставить: браузеры показывают только собственную формулировку, а диалог вообще не появится, если пользователь ни разу не взаимодействовал со страницей.

js

window.addEventListener("beforeunload", (event) => {
  if (document.querySelector("#note").value !== "") {
    event.preventDefault();
  }
});

// Проверяем логику, не уходя со страницы
const probe = new Event("beforeunload", { cancelable: true });
window.dispatchEvent(probe);
console.log(probe.defaultPrevented);

страница примера

Сначала предположите, что выведет код

Ставить такой обработчик безусловно — дурной тон: диалог на пустой форме раздражает и ничего не защищает. Условие «есть несохранённые изменения» обязано быть настоящим.

В beforeunload нельзя сделать ничего долгого: асинхронный код почти наверняка не успеет. А переложить сохранение на соседнее событие unload — и вовсе худший из вариантов: одна подписка на него лишает страницу кеша «назад-вперёд», и возврат кнопкой «назад» превращается в полную перезагрузку. У beforeunload такого последствия нет.

Для сохранения черновика надёжнее visibilitychange со значением hidden и pagehide: они приходят и при закрытии вкладки, и при сворачивании браузера на телефоне. Отправку в этот момент делают через navigator.sendBeacon — запрос переживает закрытие страницы.

js

console.log(["visible", "hidden"].includes(document.visibilityState));
console.log(typeof navigator.sendBeacon);

страница примера

Сначала предположите, что выведет код

Браузер разбирает HTML сверху вниз: скрипт видит только ту часть дерева, что находится выше него, поэтому в head элементы из body ещё не существуют.
DOMContentLoaded на document означает «разметка разобрана», load на window — «догрузились картинки, стили и фреймы»; между ними могут пройти секунды.
document.readyState хранит текущую стадию: loading, interactive или complete.
Подписка на уже случившееся событие не сработает — сначала проверяйте readyState и вызывайте обработчик напрямую.
beforeunload с preventDefault показывает стандартный диалог браузера; свой текст туда не передать, а для сохранения данных надёжнее visibilitychange и sendBeacon.

1/3Скрипт подключён в head обычным тегом script и вызывает document.querySelector("#footer"), а сам футер описан в конце body. Что вернёт вызов?

2/3Обработчик на DOMContentLoaded добавили в момент, когда document.readyState уже равен complete. Что произойдёт?

3/3Нужно узнать, какого размера получилась картинка на странице. Какого момента дождаться?

Надёжный старт независимо от момента подключения

Допишите onReady так, чтобы обработчик вызвался в обоих случаях: и когда скрипт подключился рано (разметка ещё разбирается), и когда он выполнился позже, чем случился DOMContentLoaded.

js

function onReady(handler) {
  // ваш код
}

onReady(() => {
  console.log(document.querySelector("#head").textContent); // Отчёт
});

страница примера

Сначала предположите, что выведет код

Одной подписки мало: если событие уже прошло, обработчик не вызовется. Поэтому сначала спрашиваем состояние документа.

jsлистинг · не запускается

function onReady(handler) {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", handler, { once: true });
  } else {
    handler();
  }
}

function onReady(handler) {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", handler, { once: true });
  } else {
    handler();
  }
}

Значение loading — единственное, при котором дерево ещё не готово. Значения interactive и complete оба означают, что разметка разобрана, и обработчик можно звать сразу. Флаг once не обязателен, но избавляет от ручного снятия подписки.

Предупреждение только при несохранённом черновике

Обработчик beforeunload должен просить браузер показать диалог только тогда, когда в поле что-то введено. Пустая форма уходит молча.

js

window.addEventListener("beforeunload", (event) => {
  // ваш код
});

const empty = new Event("beforeunload", { cancelable: true });
window.dispatchEvent(empty);
console.log(empty.defaultPrevented); // false — поле пустое

document.querySelector("#draft").value = "черновик";
const filled = new Event("beforeunload", { cancelable: true });
window.dispatchEvent(filled);
console.log(filled.defaultPrevented); // true

страница примера

Сначала предположите, что выведет код

Диалог включает единственная строчка — preventDefault(), и вызывать её нужно под условием.

jsлистинг · не запускается

window.addEventListener("beforeunload", (event) => {
  if (document.querySelector("#draft").value !== "") {
    event.preventDefault();
  }
});

window.addEventListener("beforeunload", (event) => {
  if (document.querySelector("#draft").value !== "") {
    event.preventDefault();
  }
});

Проверка через dispatchEvent удобна тем, что не требует реально уходить со страницы: свойство defaultPrevented показывает решение обработчика. В настоящей навигации браузер дополнительно потребует, чтобы пользователь хоть раз кликнул по странице, иначе диалог не покажет вовсе.

DOMContentLoaded, load и порядок загрузки

Видеоразбор темы за 5–7 минут

Что происходит, когда открывается страницапарсер идёт сверху вниз

Почему скрипт в head ничего не находитэлемента ещё нет в дереве

DOMContentLoaded против loadдерево готово или всё догрузилось

readyStateтекущая стадия документа одним свойством

beforeunloadспросить, точно ли уходим

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Надёжный старт независимо от момента подключения

Предупреждение только при несохранённом черновике