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

google-chrome, javascript, navigation-timing-api, performance

Solution

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:

Problem

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: 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?

Original source