Chrome网络时机，如何改进内容下载

Question

我正在检查Chrome DevTools中的XHR调用时间以改善请求缓慢但我发现99％的响应时间浪费在内容下载上，即使内容大小小于5 KB且应用程序在localhost上运行（在我的本地计算机上工作，因此没有网络问题）。

但是当使用Replay XHR菜单重播呼叫时，内容下载时间从2.13秒急剧下降到2.11毫秒（如下面的屏幕截图所示）。数据不会在浏览器级别缓存。

• 通话时间示例

• 同样的例子Relayed

有人可以解释为什么内容下载时间很慢以及如何改进它。

应用程序是一个结合angularJS的ASP.NET mvc 5解决方案。

Web服务器详细信息：   - Windows Server 2012 R2   - IIS 8

提前感谢您的支持！

Answer 1

我无法最终告诉你原因，但我可以提供一些你可以调查的变量，这可能有助于你弄清楚发生了什么。

缓存

我知道你说数据没有在浏览器级别缓存，但我建议再次检查。因为初始请求需要2s，然后重复请求只需要2ms，这听起来像是缓存。

如何检查：

1. 转到网络面板。
2. 查看请求的大小列。如果您看到from memory或from disk cache，则会从缓存中提供。



慢速开发服务器或机器

我最初的想法是，你在开发机器上做的工作比它能处理的要多。也许服务器需要的资源多于机器可以处理的资源。也许你有很多其他的程序在运行，你的内存/ CPU也在不断增加。

如何检查：

1. 在功能更强大的服务器上运行您的应用，看看该模式是否仍然存在。

前端应用程序正在做太多工作

我不确定这最后一个确实有意义，但值得一试。也许你的Angular应用程序在初始请求期间正在做大量的JS工作，并且它正在最大化你的CPU。因此，当您提出初始请求时，整个浏览器都会停止。

如何检查：

1. 转到效果面板。
2. Start recording。
3. 执行导致您的应用发出初始请求的操作。
4. 停止录制。
5. 检查 CPU 图表。如果它已完全消失，那么你的应用程序确实在做一大堆工作。



如果有任何帮助，请发表评论并告诉我。

Answer 2

我也一直在 Chrome（目前为 91.0.4472.164）上调查这个问题，因为内容下载时间似乎因下载的上下文而有很大不同。当直接访问资源或尝试通过网络调用更新呈现的内容时，内容下载时间可能是从其他客户端应用程序下载或在 Chrome 中简单地将数据保存为变量时的持续时间的 10 倍。

我创建了一个快速的、hacky 的 Spring Boot Web 应用程序，它演示了我在 github 上公开的问题：https://github.com/zielinskin/h2-training-simple

自述文件中的步骤应该足以证明巨大的性能差异。

我相信 Chrome 需要解决这个性能问题，因为它与所使用的网络服务器或用户界面框架无关。