【问题标题】:Chrome DevTools Network Waterfall - gaps between requests?Chrome DevTools 网络瀑布 - 请求之间的差距?
【发布时间】:2017-05-11 14:36:54
【问题描述】:

我一直在对运行缓慢的 Web 应用程序进行一些重构,并设法减少请求数量和下载大小以帮助改善这种情况。现在加载时间一直更短。然而,在最后两个请求之前几乎没有任何时间过去。现在始终存在差距。

Q1:这些“差距”在 Chrome 网络视图中表示什么?

Q2:看看屏幕截图,DOMContentLoaded 时间与整体完成时间,我能得出什么结论可以帮助我进一步优化吗?

【问题讨论】:

  • 1.花在不是网络请求的东西上的时间。 2.没有。

标签: google-chrome-devtools


【解决方案1】:

在“性能”面板中记录页面加载。请参阅Get Started With Analyzing Runtime Performance 了解如何使用面板的要点。 Understanding the network bottleneck 也可以帮助您确定方向。

但是,您需要按 重新加载页面 按钮(就像 Sam 在“了解网络瓶颈”视频中所做的那样)而不是 录制 按钮来录制页面加载性能,正如“开始分析运行时性能”所指示的那样。

录制完成后,Main 部分会显示页面加载时发生的所有主线程活动。 网络部分向您显示所有网络请求。您可能能够直观地验证在您在屏幕截图中看到的间隙期间是否有大量 JavaScript 工作正在进行。

如果您仍然不清楚,请发布您的性能面板记录的屏幕截图,我会帮助您解码结果。

【讨论】:

    猜你喜欢
    • 2019-07-20
    • 2015-12-24
    • 2022-10-23
    • 2016-10-30
    • 1970-01-01
    • 2014-05-22
    • 2021-09-19
    • 1970-01-01
    • 2015-03-03
    相关资源
    最近更新 更多