3

Как известно, работать с DOM можно по событию DOMContentLoaded элемента document, не дожидаясь события window.onload. Но так же есть событие document.onreadystatechange, которое при первой генерации говорит о том, что структура DOM готова (document.readyState при этом == interactive). document.readyState == interactive мы получаем немного раньше события DOMContentLoaded, вопрос почему? Что именно ещё не подгрузилось между первой генерацией document.onreadystatechange и событием DOMContentLoaded? На скрине видно время с начала загрузки страницы и события.

введите сюда описание изображения

1 ответ 1

3

Весьма занятный вопрос. Я заинтересовался и немного углубился в тему. Возможно, я нашел правильный ответ. Позже обязательно проведу "опыты" для подтверждения, а пока предварительные данные)

Вот на этой странице подробное (в отличие от сухой и формальной офф. документации) описание принципа работы события DOMContentLoaded. Если подробно ознакомиться, можно заметить упоминания того, что событие, все же, ожидает загрузки некоторых стилей, к примеру, в случае, если они блокируют выполнение внутри <script> на странице.

По всей видимости, это и отличает DOMContentLoaded от Document.readyState == interactive, который, судя по всему, вызывается непосредственно после окончания парсинга страницы.

Эти выводы подтверждаются ответом на этот схожий вопрос:

https://stackoverflow.com/questions/3665561/document-readystate-of-interactive-vs-ondomcontentloaded

Вкратце перевод ответа:

После окончания парсинга документа браузер выполняет следующие шаги:

  1. Устанавливает статус готовности документа в "interactive".

  2. Убирает все узлы (ноды) из стека открытых элементов.

  3. (самое интереное) Если список скриптов, которые будут выполнены после окончания парсинга документа, не пуст, выполняет следующие действия: ожидает готовности к выполнению первого из скриптов и отсутствия блокирующих его таблиц стилей, после чего выполняет его; ожидает готовности к выполнению второго из скриптов и отсутствию... и так, пока не будут выполнены все скрипты, ожидавшие выполнения после окончания парсинга документа.

  4. Помещает в очередь вызова простое "пузырьковое" событие DOMContentLoaded.

1
  • По всей видимости так и есть, DOMContentLoaded ждет ещё и загрузку скриптов, а onreadystatechange - нет. Так что надежнее работать с DOM по событию DOMContentLoaded, так как могут быть какие-то предварительные манипуляции в загружаемых скриптах.
    – Kot
    4 сен 2016 в 8:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.