从“navigationStart”开始时，性能用户计时 API 测量无法正常工作答案

【问题标题】：Performance user timings API measure not working properly when started from 'navigationStart'从“navigationStart”开始时，性能用户计时 API 测量无法正常工作
【发布时间】：2021-05-10 23:19:54
【问题描述】：

为了使用性能用户 timigs API 来衡量应用的性能，我在应用完全加载的地方使用了以下代码。

window.performance.mark('stop-step');
window.performance.measure('app_load_performance', 'navigationStart', 'stop-step');

分析时，在性能选项卡中，仅当 Web 应用在已经运行的浏览器窗口中刷新时，计时部分才会显示性能标记。

如果这是从新执行 Web 应用程序的新浏览器选项卡中分析的，则分析不会显示性能标记。

这是一个反应应用。是否存在限制应用程序从新标签显示性能标记的东西？

【问题讨论】：

我知道这可能很明显（但有时它只需要第二双眼睛）但是你确定上面真的被调用了吗？你有没有回到老黄金console.log 来检查是否有什么东西没有导致它一开始就没有被调用，例如新运行时的执行模式与使用热缓存的执行模式不同？我假设您没有可能导致此问题的控制台错误（我也知道，但有时当您处于战斗“中间”时很容易错过！）

标签： javascript reactjs performance google-chrome google-chrome-devtools

【解决方案1】：

根据Mozilla Navigation and resource timings;

performanceTiming API，一种用于测量请求页面的加载性能，已弃用，但所有浏览器都支持。它已被替换为 performanceNavigationTiming API。

当没有上下文并且标记navigationStart指向同一页面时会发生什么：

当卸载提示终止于相同的浏览上下文。 如果没有以前的文档，这个值将与 PerformanceTiming.fetchStart 相同。

而在new API：

Navigation Timing API 提供可用于衡量的数据网站的性能。 不同于基于 JavaScript 的库 历史上被用来收集类似的信息， Navigation Timing API 可以更加准确和可靠。

此外，如果您在 new API 页面中向下滚动，您可以看到 fetchStart 标记已被标记为弃用。

很有可能由于某种原因您的浏览器不再处理此标记。并且新库与旧库没有向后兼容性。所以这就解释了为什么当有以前的文档时你可以看到性能，但是当没有之前的文档时你看不到它。

【讨论】：