Chrome DevTools网络瀑布-请求之间的差距? [英] Chrome DevTools Network Waterfall - gaps between requests?

问题描述

我一直在运行缓慢的Web应用程序上进行一些重构，并设法减少了请求数量和下载量，以帮助改善这种情况.现在，加载时间持续缩短.但是，在最近两个请求之前几乎没有经过任何时间.现在始终存在差距.

I've been doing some refactoring on a slow running web application, and managed to reduce the number of requests and the size of the downloads to help improve the situation. Now the loading time is consistently shorter. However, consistently before there was hardly any time elapsed before the last 2 requests. Now consistently there is a gap.

问题1:这些空白"在Chrome的网络视图中表示什么?

第2季度:看一下屏幕截图，即DOMContentLoaded时间与总体完成时间"，我能得出任何可以帮助我进一步优化的结论吗?

推荐答案

在性能"面板中记录页面加载.请参阅开始分析运行时性能以了解要点.如何使用面板.了解网络瓶颈也可以帮助您适应.

Record the page load in the Performance panel. See Get Started With Analyzing Runtime Performance to get the gist of how to use the panel. Understanding the network bottleneck can also help get you oriented.

但是，您需要按重新加载页面按钮(如Sam在了解网络瓶颈"视频中所做的那样)，而不是按 Record 按钮进行记录页面加载性能，如开始分析运行时性能"所指示的那样.

However, you'll want to press the Reload page button (like Sam does in the "understanding the network bottleneck" video) instead of the Record button to record the page load performance, as the "get started with analyzing runtime performance" instructs you to do.

获得记录后，主要部分将显示页面加载期间发生的所有主线程活动.网络部分显示了所有的网络请求.您可能可以直观地验证在屏幕截图中看到的空白期间，是否正在进行大量JavaScript工作.

Once you've got a recording, the Main section shows you all of the main thread activity that occurs while the page is loading. The Network section shows you all of the Network requests. You'll probably be able to visually verify that there's a bunch of JavaScript work going on during the gap that you're seeing in your screenshots.

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

If it's still not clear to you, post a screenshot of your Performance panel recording and I'll help you decode the results.

这篇关于Chrome DevTools网络瀑布-请求之间的差距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！