如何在Chrome Dev Tool中使用Network's Waterfall来诊断Web渲染性能问题？

Question

我们的某个网页存在渲染性能问题，当页面打开时，微调器会冻结或加载非常滞后，并且在6-12秒后页面完成加载。所以我在chrome dev工具中使用Network的瀑布来诊断问题。但我得到了一些我不明白发生了什么情况。

在以下屏幕截图中，相应页面的所有资源都在很短的时间内加载，但是微调器冻结了6秒或9秒，我不确定资源加载后和之前发生了什么页面完成加载，可能是微调器在错误的线程中或以某种方式被阻止？我应该用什么方法来找出原因？

场景1

场景2

更新

网络截图

时间线截图

更新

检查事件日志后，我认为问题发生在Angular摘要周期，终点响应时间应该仍然是780ms。

Answer 1

感谢您提供详细信息。如果你可以链接到页面会更有帮助，但我知道这通常是不可能的。我将为同一条船上的人们提供一些一般数据。不过，我不知道我是否能够完全回答这个具体问题。

在场景1 和场景2 屏幕截图中，您可以看到您的资源在1或2秒内加载。这是你的提示，问题与网络无关。

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

在时间轴屏幕截图中，您可以看到您的CPU使用率从大约1900毫秒到超过16000毫秒完全超出。所以你的页面迫使浏览器做了大量的工作。这可能是在JavaScript中。

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

同样，我不知道这个答案对于这个特定问题有多大帮助，但我想我会尝试以一种不同的，更一般的方式重新解释这个问题。