我们的一个网页存在渲染性能问题，当页面打开时，spinner 冻结或加载非常缓慢，并且在 6-12 秒后页面完成加载。所以我在 chrome 开发工具中使用网络的瀑布来诊断问题。但是我遇到了一些我不明白发生了什么的情况。
在下面的截图中，相应页面的所有资源都在很短的时间内加载完毕，但是微调器冻结了 6 秒或 9 秒，我不确定在资源加载后和页面完成之前发生了什么加载，也许微调器在错误的线程中或以某种方式被阻塞？我应该用什么方法来找出原因？
方案 1
方案 2
更新
网络截图
时间线截图
更新
检查事件日志后，我认为问题发生在 Angular 摘要周期，端点响应时间仍应为 780 毫秒。
感谢您提供详细信息。如果您可以链接到该页面会更有帮助，但我知道这通常是不可能的。我只会为同一条船上的人提供一些一般数据。不过，我不知道我是否能够完全回答这个具体问题。
在场景 1和场景 2的屏幕截图中，您可以看到您的资源在 1 或 2 秒内加载完毕。这是您的暗示，该问题与网络无关。
因此，虽然这是一个页面加载问题，但它与网络无关。
在Timeline Screenshot中，您可以看到您的 CPU 使用率从大约 1900 毫秒到超过 16000 毫秒已完全达到最大值。所以你的页面迫使浏览器做大量的工作。这可能在 JavaScript 中。
为了诊断这一点，我将调查您可以在Timeline Screenshot中看到的火焰图（在Main下） 。条形越长，完成该功能所需的时间就越长。或者，如果您看到一个小函数被调用了数千次，这可能就是原因。如果您可以优化这些调用，那么您可以更快地加载您的页面。您可以单击UPDATE屏幕截图中的Self Time标题以根据最耗时的函数调用对函数调用进行排名。
同样，我不知道这个答案对这个特定问题有多大帮助，但我想我会尝试以不同的、更一般的方式重新表述这个问题。