如何使用 Chrome Dev Tool 中的 Network's Waterfall 诊断网页渲染性能问题？

Question

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

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

场景一

场景二

更新

网络截图

时间线截图

更新

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

Answer 1

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

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

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

在 Timeline Screenshot 中，您可以看到您的 CPU 使用时间从大约 1900 毫秒完全达到最大值，超过 16000 毫秒。所以你的页面迫使浏览器做大量的工作。这大概在JavaScript.

为了诊断这一点，我调查了火焰图（在 Main 下），您可以在 Timeline Screenshot 中看到它。条形图越长，该功能完成所需的时间就越长。或者，如果您看到一个小函数被调用了数千次，这可能就是原因。如果您可以优化这些调用，那么您可以更快地以视觉方式加载您的页面。您可以点击 UPDATE 屏幕截图中的 Self Time header 来根据花费时间最多的函数调用进行排名。

同样，我不知道这个答案对这个特定问题有多大帮助，但我想我会尝试以不同的、更通用的方式重新表述这个问题。