Chrome network Timing , 如何改进 Content Download
Chrome network Timing , how to improve Content Download
我正在检查 Chrome DevTools 中的 XHR 调用时间以改进缓慢的请求，但我发现 99% 的响应时间浪费在内容下载上，即使内容大小小于 5 KB，并且该应用程序在本地主机上 运行（在我的本地计算机上工作，因此没有网络问题）。
但是当使用重播 XHR 菜单重播通话时，内容下载周期从 2.13 秒急剧下降到 2.11 毫秒（如下面的屏幕截图所示）。数据未缓存在浏览器级别。
调用时间示例
重播相同示例
有人可以解释为什么内容下载时间慢以及如何改进吗？
该应用程序是一个 ASP.NET mvc 5 解决方案，结合 angularJS。
Web 服务器详细信息：
- Windows 服务器 2012 R2
- IIS 8
在此先感谢您的支持！
我不能最终告诉你这是什么原因，但我可以提供一些你可以调查的变量，这可能有助于你弄清楚发生了什么。
缓存
我知道你说过数据没有在浏览器级别缓存，但我建议再次检查。因为初始请求需要2s，然后重复请求只需要2ms，这听起来真的很像缓存。
如何检查：
- 转到网络面板。
- 查看请求的 大小 列。如果您看到
from memory 或 from disk cache，它是从缓存中提供的。
服务器或机器开发速度慢
我最初的想法是您在开发机器上做的工作超出了它的处理能力。也许服务器需要的资源比您的机器可以处理的要多。也许您还有很多其他程序 运行 而您的内存 / CPU 已满。
如何检查：
- 运行 您的应用在更强大的服务器上运行，看看该模式是否仍然存在。
前端应用做的工作太多
我不确定最后一个是否真的有意义，但值得一试。也许您的 Angular 应用程序在初始请求期间正在做大量的 JS 工作，并且它正在最大化您的 CPU。因此，当您发出初始请求时，整个浏览器都在停滞。
如何检查：
- 转到性能面板。
- Start recording.
- 执行导致您的应用发出初始请求的操作。
- 停止录制。
- 检查 CPU 图表。如果它完全用完了，那么您的应用确实在做很多工作。
请发表评论，让我知道这些是否有帮助。
我也一直在 Chrome（当前为 91.0.4472.164）上调查此问题，因为根据下载的上下文，内容下载时间似乎有很大差异。当直接访问资源或尝试通过网络调用更新呈现的内容时，从其他客户端应用程序下载内容或仅将数据作为变量保存在 Chrome.
我创建了一个 quick，hacky Spring 引导网络应用程序，它演示了我在 github 上 public 遇到的问题：https://github.com/zielinskin/h2-training-simple
希望自述文件中的步骤足以展示巨大的性能差异。
我相信 Chrome 需要解决这个性能问题，因为它与正在使用的网络服务器或 ui 框架无关。
“内容下载”包括下载内容所花费的时间以及服务器上传内容所花费的时间。您可以测试以下情况，看看是什么原因造成的。通常是它们的组合。
案例一：服务器延迟
假设 运行 服务器和客户端在本地主机上，网络延迟为 0，数据量很小。
time0 client receives a response with header content-length = 20
time5 server > client: 10 bytes of data
time5 client receives data
案例二：网络延迟
使用hard-coded虚拟数据加速服务器
time0 client receives a response with header content-length = 20
time0 server > client: 10 bytes of data
time5 client receives data
情况三：客户端太忙
通过在终端中尝试类似 curl google.com -v 的方式直接访问 URL 来隔离查询。您可以使用 Chrome 开发工具和 Firefox 开发工具来复制请求，如下所示。
我正在检查 Chrome DevTools 中的 XHR 调用时间以改进缓慢的请求，但我发现 99% 的响应时间浪费在内容下载上，即使内容大小小于 5 KB，并且该应用程序在本地主机上 运行（在我的本地计算机上工作，因此没有网络问题）。
但是当使用重播 XHR 菜单重播通话时，内容下载周期从 2.13 秒急剧下降到 2.11 毫秒（如下面的屏幕截图所示）。数据未缓存在浏览器级别。
调用时间示例
重播相同示例
有人可以解释为什么内容下载时间慢以及如何改进吗？
该应用程序是一个 ASP.NET mvc 5 解决方案，结合 angularJS。
Web 服务器详细信息： - Windows 服务器 2012 R2 - IIS 8
在此先感谢您的支持！
我不能最终告诉你这是什么原因，但我可以提供一些你可以调查的变量，这可能有助于你弄清楚发生了什么。
缓存
我知道你说过数据没有在浏览器级别缓存，但我建议再次检查。因为初始请求需要2s，然后重复请求只需要2ms，这听起来真的很像缓存。
如何检查：
- 转到网络面板。
- 查看请求的 大小 列。如果您看到
from memory或from disk cache，它是从缓存中提供的。
服务器或机器开发速度慢
我最初的想法是您在开发机器上做的工作超出了它的处理能力。也许服务器需要的资源比您的机器可以处理的要多。也许您还有很多其他程序 运行 而您的内存 / CPU 已满。
如何检查：
- 运行 您的应用在更强大的服务器上运行，看看该模式是否仍然存在。
前端应用做的工作太多
我不确定最后一个是否真的有意义，但值得一试。也许您的 Angular 应用程序在初始请求期间正在做大量的 JS 工作，并且它正在最大化您的 CPU。因此，当您发出初始请求时，整个浏览器都在停滞。
如何检查：
- 转到性能面板。
- Start recording.
- 执行导致您的应用发出初始请求的操作。
- 停止录制。
- 检查 CPU 图表。如果它完全用完了，那么您的应用确实在做很多工作。
请发表评论，让我知道这些是否有帮助。
我也一直在 Chrome（当前为 91.0.4472.164）上调查此问题，因为根据下载的上下文，内容下载时间似乎有很大差异。当直接访问资源或尝试通过网络调用更新呈现的内容时，从其他客户端应用程序下载内容或仅将数据作为变量保存在 Chrome.
我创建了一个 quick，hacky Spring 引导网络应用程序，它演示了我在 github 上 public 遇到的问题：https://github.com/zielinskin/h2-training-simple
希望自述文件中的步骤足以展示巨大的性能差异。
我相信 Chrome 需要解决这个性能问题，因为它与正在使用的网络服务器或 ui 框架无关。
“内容下载”包括下载内容所花费的时间以及服务器上传内容所花费的时间。您可以测试以下情况，看看是什么原因造成的。通常是它们的组合。
案例一：服务器延迟
假设 运行 服务器和客户端在本地主机上，网络延迟为 0，数据量很小。
time0 client receives a response with header content-length = 20
time5 server > client: 10 bytes of data
time5 client receives data
案例二：网络延迟
使用hard-coded虚拟数据加速服务器
time0 client receives a response with header content-length = 20
time0 server > client: 10 bytes of data
time5 client receives data
情况三：客户端太忙
通过在终端中尝试类似 curl google.com -v 的方式直接访问 URL 来隔离查询。您可以使用 Chrome 开发工具和 Firefox 开发工具来复制请求，如下所示。