如何使用Chrome Dev Tool中的网络瀑布图来诊断网页渲染性能问题？

Question

9

我们的其中一个网页存在渲染性能问题，当打开该页面时，旋转图标会冻结或加载非常缓慢，而且在6-12秒后才完成加载。因此我正在使用Chrome Dev工具中的网络瀑布来诊断该问题。但是我遇到了一些情况，不确定发生了什么。

在以下截图中，所有相应页面的资源都是在很短的时间内加载完毕的，但旋转图标却被冻结了6秒或9秒，我不确定在资源加载完毕和页面加载完成之前发生了什么，也许旋转图标在错误的线程中或以某种方式被阻塞了？我应该使用哪种方法找出原因？

更新：

网络截图

时间轴截图

在检查事件日志之后，我认为问题出现在Angular digest周期中，该端点响应时间仍应为780ms。

- Zhemin Zhang

请使用时间轴：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool - wOxxOm

@wOxxOm 感谢您的回复。我已经添加了一个带有网络截图和时间轴截图的场景，其中突出显示的请求需要780毫秒，但在时间轴中需要约8秒钟。为什么会这样？ - Zhemin Zhang

我对这些问题不是很熟练，没有看到网站就无法回答，你可以在等待答案的同时尝试找一些使用时间轴工具的教程。 - wOxxOm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kayce Basques · Accepted Answer

感谢提供详细信息。如果您能提供页面链接会更有帮助，但我明白这通常不可能。我将为处于同一境地的人提供一些普遍数据。虽然我不知道是否能完全回答这个具体问题。

在场景1和场景2的截图中，您可以看到资源加载需要1或2秒钟。这表明问题与网络无关。

因此，虽然这是一个页面加载问题，但与网络无关。

在时间轴截图中，您可以看到CPU使用率从1900ms到16000ms之后完全达到最大值。所以您的页面强制浏览器执行了巨量工作，这可能是JavaScript引起的。

为了诊断此问题，我将调查时间轴截图中的火焰图（在主要下）。条形越长，该函数完成所需的时间就越长。或者，如果您看到一个小函数被调用了数千次，那可能是原因。如果您可以优化这些调用，那么您可以更快地加载页面。您可以单击更新截图中的自身时间标题，根据所花费的时间对函数调用进行排名。

再次说明，我不知道这个答案对这个特定问题有多大帮助，但我想尝试以不同的、更普遍的方式重新表述问题。