Chrome网络定时，如何改善内容下载

Posted 2023-03-07

【中文标题】Chrome网络定时，如何改善内容下载

【英文标题】：Chrome network Timing , how to improve Content Download

【发布时间】：2018-03-23 04:46:39

【问题描述】：

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

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

呼叫计时示例

重放相同的示例

有人能解释一下为什么内容下载时间慢以及如何改进吗？

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

Web 服务器详细信息： - 视窗服务器 2012 R2 - IIS 8

提前感谢您的支持！

【问题讨论】：

这么慢是因为在页面加载时你调用了多个 API，我的意思是你的机器需要 2 秒来处理多个请求，或者你的请求是一个接一个？

即使只是一次调用，内容下载所需的时间也相同

当您重放 XHR 时，它只是再次发送请求。如果我遗漏了什么，请告诉我。

是的，它再次发送请求，但不是来自应用程序代码，它是从 chrome devTools 完成的

检查 chrome 是否在标头和参数中发送了不同的内容

【参考方案1】：

我无法确切地告诉您造成这种情况的原因，但我可以提供一些您可以调查的变量，这可能会帮助您弄清楚发生了什么。

缓存

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

如何检查：

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

缓慢的开发服务器或机器

我最初的想法是，您在开发机器上做的工作比它所能处理的要多。也许服务器需要比您的机器处理更多的资源。也许您有很多其他程序正在运行，并且您的内存/CPU 已达到最大值。

如何检查：

在更强大的服务器上运行您的应用，看看这种模式是否仍然存在。

前端应用做的工作太多

我不确定最后一个是否有意义，但值得一试。也许您的 Angular 应用程序在初始请求期间正在执行大量的 JS 工作，并且它正在最大限度地利用您的 CPU。因此，当您发出初始请求时，整个浏览器都会停止。

如何检查：

转到性能面板。 Start recording. 执行导致您的应用发出初始请求的操作。 停止录制。 查看CPU图表。如果它完全用尽了，那么您的应用确实在做很多工作。

请留下评论，让我知道这些是否有帮助。

【讨论】：

感谢您的回答 Kayce，是的，正如您所说，前端应用程序正在做太多工作，当打开一个对话框 ($mdDialog) 时，有超过 500 名观察者，因为它是一个 Angular js 应用程序和所有$http 调用触发了一个摘要循环，这意味着更多的工作。要解决这个问题，我有两个选择，要么在对话框打开承诺上禁用观察者并在完成时重置它们，要么对所有 xhr 调用使用网络工作者，这两个解决方案都给出了令人印象深刻的结果。

酷，很高兴它有帮助，感谢您提供有关根本原因的信息。

【参考方案2】：

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

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

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

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

【参考方案3】：

“内容下载”包括下载内容所用的时间以及服务器上传内容的时间。您可以测试以下情况，看看是什么原因。通常是所有这些的组合。

案例1：服务器延迟

假设在 localhost 上运行服务器和客户端，网络延迟为 0，数据量小。

time0 client receives a response with header content-length = 20
time5 server > client: 10 bytes of data
time5 client receives data

案例2：网络延迟

使用硬编码的虚拟数据加速服务器

time0 client receives a response with header content-length = 20
time0 server > client: 10 bytes of data
time5 client receives data

案例3：客户太忙

通过在终端中尝试curl google.com -v 之类的方法来隔离查询以直接访问 URL。您可以使用 Chrome 开发工具和 Firefox 开发工具复制请求，如下所示。