Время отклика в API времени

Question

Я пытаюсь измерить производительность загрузки страницы с помощью API синхронизации.Для начала я включил фрагмент кода в тело моего HTML-документа, чтобы проверить, правильно ли я получаю все атрибуты.

<script>
    window.addEventListener('load', () => {
       console.log("navigationStart : "+  (performance.timing.navigationStart));
       console.log("responseStart : "+ (performance.timing.responseStart));
       console.log("responseEnd : "+ (performance.timing.responseEnd));
       console.log("domComplete : "+ (performance.timing.domComplete));
       console.log("loadEventStart : "+ (performance.timing.loadEventStart));
       console.log("LoadEventEnd : "+ (performance.timing.loadEventEnd));
     });        

Вывод ниже

navigationStart: 1538169000862
responseStart: 1538169000862
responseEndEnd: 1538169000862
domComplete: 1538169001831
loadEventStart: 1538169001831 LoadEventEnd: 0

Я не знаю, почему LoadEvent?Это потому, что страница все еще загружается?какое было бы лучшее время для захвата этих метрик тогда?

Редактировать: - После введения тайм-аута я смог зафиксировать время LoadEvendEnd.Однако при переходе на следующие страницы многие атрибуты теперь равны нулю.

navigationStart: 1538172249035 responseStart: 1538172249035 responseEnd: 1538172249035 domComplete: 0 loadEventStart: 0 LoadEventEnd: 0

Эта навигация находится внутрикадр, как я понимаю.

Answer 1

Да - LoadEventEnd равен нулю, поскольку страница все еще загружается.
Вам необходимо выполнить код после загрузки страницы ...

window.addEventListener('load', loaded)

... недостаточно, поскольку очередь загрузкине закончил
Хитрость заключается в том, чтобы вернуть код в очередь событий ...

function loaded() {
  setTimeout(nowYouCanDoIt, 0)
}

... и проверить, что loadEventEnd больше не равен нулю:

function nowYouCanDoIt() {
  console.log("loadEventEnd: " + performance.getEntriesByType("navigation")[0].loadEventEnd)
}