Chrome - devtools时间线中的事件时间与性能计时API之间的差异

Question

我试图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

但是在devtools的Timeline选项卡中,我得到结果510毫秒.这张图中显示了不同之处:

在其他站点上会出现此问题:在控制台中,我总是比"时间线"选项卡中的时间短.有人可以解释这种差异吗？哪一次是真的？

Answer 1

正如@Dragomok 在评论中建议的那样：

navigation-timing-api开始记录navigationStart事件。性能选项卡时间线在事件发生前“某个时间”开始记录navigationStart，这就是原因performance.getEntriesByType("navigation")[0].loadEventEnd给出的值比loadEventEnd时间线中的值更小。

如果你计算一下时间线loadEventEnd - navigationStart您将获得与 中相同的值navigation-timing-api。

这是图片证明：