小编Zhe*_*ang的帖子

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

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

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

场景一

1

场景二

2

更新

网络截图

图片

时间线截图

图片

更新

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

图片

google-chrome-devtools web-performance

7
推荐指数
1
解决办法
9681
查看次数