Подтвердить что ты не робот

Chrome - разница между временем события в графике времени devtools и графике времени выполнения

Я пытаюсь получить, например, loadEventEnd время в консоли. Вы можете сделать это с помощью производительности 2 API-интерфейсов или API-интерфейс производительности. Я получаю те же результаты, выполнив следующие вычисления:

performance.getEntriesByType("navigation")[0].loadEventEnd
// 483.915
chrome.loadTimes().finishLoadTime * 1000 - chrome.loadTimes().startLoadTime * 1000 
// 484
performance.timing.loadEventEnd - performance.timing.navigationStart
// 484

Но на вкладке Timeline в devtools я получаю результат 510 мс. Различия показаны на этом рисунке:

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

Эта проблема возникает на других сайтах: в консоли я всегда получаю меньше времени, чем на вкладке Timeline. Может ли кто-нибудь объяснить эту разницу? Какое время реально?

4b9b3361

Ответ 1

Как поясняет @Dragomok в комментарии:

navigation-timing-api начинает запись в событии navigationStart. График вкладки вкладки производительности запускает записи "некоторое время" перед событием navigationStart, поэтому performance.getEntriesByType("navigation")[0].loadEventEnd дает меньшее значение, чем loadEventEnd на временной шкале.

Если вы подсчитаете временную шкалу loadEventEnd - navigationStart, вы получите то же значение, что и в navigation-timing-api.

Вот доказательство в картинках: введите описание изображения здесь


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