Когда браузер получает строку с HTML-разметкой с сервера, тогда он пытается построить объектную модель документа — «DOM«. Нетрудно догадаться, что этот процесс будет занимать некоторое время. Чем больше HTML-разметка и чем глубже вложенность HTML-элементов друг в друга, тем дольше браузер будет строить объект DOM-документа. На задержку также влияет количество подключаемых скриптов (HTML-элементов script).
Созданный новый объект document имеет ключ состояния готовности — «readyState«.
- Сразу после создания документа, ключ «readyState» имеет значение «loading«. Значение актуально во время загрузки объекта документа.
- После завершения синтаксического анализа HTML-разметки, значение ключа «readyState» меняется на «interactive«. Но загрузка подресурсов на этом этапе продолжается.
- Как только все подресурсы будут загружены, тогда ключ «readyState» изменит своё значение на «complete«.
Так вот, событие «DOMContentLoaded» будет вызвано, когда ключ «readyState» объекта document перейдёт в состояние «interactive«, до перехода в состояние «complete«, кроме элементов асинхронного сценария — async script.
Говоря простыми словами, итоговый вид HTML-страницы после события «DOMContentLoaded» может иметь неполное контентное содержание. Какие-то элементы могут ещё не успеть загрузиться и отрисоваться. В результате рендеринг страницы может быть не полным. Могут пропасть тексты, картинки, заголовки и тому подобное.
Важно учитывать с какими атрибутами будут переданы HTML-элементы script.
Всего существует два варианта оформления этих атрибутов:
- async
- defer
Атрибуты «async» и «defer» — это логические атрибуты, указывающие, как должен оцениваться скрипт. Классические скрипты могут указывать defer (отсрочку) или async (асинхронность), но не должны указывать ни то, ни другое, если не присутствует атрибут src. Скрипты модулей могут указывать атрибут async, но не должны указывать атрибут defer.
Существует несколько возможных режимов, которые можно выбрать с помощью этих атрибутов и в зависимости от типа сценария.
Информационные ссылки
HTML | Отчёт о статусе загрузки документа
Атрибуты HTM-элемента script — https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
Стандарт HTML — Раздел «3.1.4 Reporting document loading status» — https://html.spec.whatwg.org/multipage/dom.html#reporting-document-loading-status
Стандарт HTML — Раздел «3.1.4 Reporting document loading status» — https://html.spec.whatwg.org/#reporting-document-loading-status
