javascript - 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 ms的结果。差异如下图所示：

此问题发生在其他站点上：在控制台中，我总是比在时间轴选项卡中获得更短的时间。有人可以解释这种区别吗？哪一次是真实的？

Answer 1

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

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

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

以下是图片证明：