Как известно, работать с DOM можно по событию DOMContentLoaded элемента document, не дожидаясь события window.onload. Но так же есть событие document.onreadystatechange, которое при первой генерации говорит о том, что структура DOM готова (document.readyState при этом == interactive). document.readyState == interactive мы получаем немного раньше события DOMContentLoaded, вопрос почему? Что именно ещё не подгрузилось между первой генерацией document.onreadystatechange и событием DOMContentLoaded? На скрине видно время с начала загрузки страницы и события.
1 ответ
Весьма занятный вопрос. Я заинтересовался и немного углубился в тему. Возможно, я нашел правильный ответ. Позже обязательно проведу "опыты" для подтверждения, а пока предварительные данные)
Вот на этой странице подробное (в отличие от сухой и формальной офф. документации) описание принципа работы события DOMContentLoaded
. Если подробно ознакомиться, можно заметить упоминания того, что событие, все же, ожидает загрузки некоторых стилей, к примеру, в случае, если они блокируют выполнение внутри <script>
на странице.
По всей видимости, это и отличает DOMContentLoaded
от Document.readyState == interactive
, который, судя по всему, вызывается непосредственно после окончания парсинга страницы.
Эти выводы подтверждаются ответом на этот схожий вопрос:
https://stackoverflow.com/questions/3665561/document-readystate-of-interactive-vs-ondomcontentloaded
Вкратце перевод ответа:
После окончания парсинга документа браузер выполняет следующие шаги:
Устанавливает статус готовности документа в "interactive".
Убирает все узлы (ноды) из стека открытых элементов.
(самое интереное) Если список скриптов, которые будут выполнены после окончания парсинга документа, не пуст, выполняет следующие действия: ожидает готовности к выполнению первого из скриптов и отсутствия блокирующих его таблиц стилей, после чего выполняет его; ожидает готовности к выполнению второго из скриптов и отсутствию... и так, пока не будут выполнены все скрипты, ожидавшие выполнения после окончания парсинга документа.
Помещает в очередь вызова простое "пузырьковое" событие DOMContentLoaded.
-
По всей видимости так и есть, DOMContentLoaded ждет ещё и загрузку скриптов, а onreadystatechange - нет. Так что надежнее работать с DOM по событию DOMContentLoaded, так как могут быть какие-то предварительные манипуляции в загружаемых скриптах.– Kot4 сен 2016 в 8:37