CODEWITHSUNDEEP
javascriptperformancegoogle-chromenavigation-timing-api
Everettss
Everettss

Reputation: 16069

Chrome - Difference between event time in devtools timeline and performance timing API

I'm trying to get for example loadEventEnd time in console. You can do it by performance timing 2 API or performance timing API. I get the same results by doing this calculations:

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

But in Timeline tab in devtools I get result 510 ms. Differences are shown in this picture:

enter image description here

This problem occurs on the others sites: in console I always get shorter times than in Timeline tab. Can someone explain this difference? Which one time is real?

Upvotes: 12

Views: 1101

Answers (1)

Everettss
Everettss

Reputation: 16069

As @Dragomok in comment suggest:

navigation-timing-api starts record on navigationStart event. Performance tab timeline starts records "some time" before navigationStart event, that's why performance.getEntriesByType("navigation")[0].loadEventEnd gives smaller value than loadEventEnd in timeline.

If you calculate timeline loadEventEnd - navigationStart you will get the same value as in navigation-timing-api.

Here is proof in pictures: enter image description here


enter image description here

Upvotes: 1

Related Questions