API навигационного тайминга. Что происходит между domContentLoadedEventStart и domContentLoadedEventEnd?
W3C указывает список событий и их соответствующие тайминги, которые должны возвращать пользовательские агенты, если они хотят поддерживать API синхронизации навигации.
Список вы можете посмотреть здесь: http://www.w3.org/TR/navigation-timing/#process
Понимание того, какой процесс связан с тем, какие события в большинстве случаев довольно прямолинейны. Но одна вещь, которая ускользает от меня, это то, что происходит между domContentLoadedEventStart
и domContentLoadedEventEnd
.
Вот что я понял до сих пор и основываю свои размышления на:
-
domLoading
//UA начинает разбор документа.
-
domInteractive
//UA завершил разбор документа. пользователей
может взаимодействовать со страницей.
-
domContentLoaded
//Документ полностью загружен и
разобранные и отложенные сценарии, если они есть, выполнены. (Асинхронные скрипты,
если таковые имеются, могли или не могли быть выполнены???)
-
domComplete
//Дерево DOM полностью построено. Асинхронные скрипты, если
любые, выполнены.
-
loadEventEnd
//У UA есть полностью заполненная страница. Все ресурсы,
например изображения, swf и т.д.
Вы должны иметь возможность определить, что происходит после фазы №3 (domContentLoaded
), понимая, что вызвало событие №4 (domComplete
), но не инициировало предыдущие события.
Итак, можно было бы подумать, что "сценарии Async, если они были выполнены" означает, что асинхронные скрипты выполняются после фазы №3, но до события №4. Но, согласно моим тестам, это не то, что происходит, если только мой тест не прав. (Я пытался реплицировать свой тест на JSFiddle
, но я не могу сделать работу с отложенным/асинхронным script, так как не существует способа добавить атрибут во внешние скрипты.)
Итак, мой вопрос: какой процесс происходит между domContentLoadedEventStart
и domContentLoadedEventEnd
?
Ответы
Ответ 1
Эти тайминги связаны с событиями domContentLoaded
. Он похож на событие load
с loadEventStart
и loadEventEnd
. Вместо использования load
вы используете domContentLoaded
.
Например, добавление события domContentLoaded
и запуск в нем некоторого кода должно дать вам другое начало и конец.
document.addEventListener("DOMContentLoaded", function(event) {
var j = 0;
for (var i = 0; i < 10000000; i++) {
j = i;
}
});
Как только это событие будет запущено, API синхронизации навигации вернет другую временную метку между временем начала и окончания, в зависимости от того, сколько времени займет ваше событие (ы).
Из документации W3C, которую вы указали, я считаю, что с этими таймингами не происходит никаких других процессов.
domContentLoadedEventStart
Этот атрибут должен возвращать время непосредственно перед тем, как агент пользователя запускает событие DOMContentLoaded в документе.
Свойство domContentLoadedEventEnd
Этот атрибут должен возвращать время сразу после завершения события документа DOMContentLoaded.