angularjs - Chrome 网络计时，如何改进内容下载

Question

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

但是当使用 Replay XHR 菜单重放调用时，内容下载周期从 2.13 s 急剧下降到 2.11 ms(如下面的屏幕截图所示)。数据不在浏览器级别缓存。

调用时序示例

重放相同的示例

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

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

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

预先感谢您对我们的支持!

Answer 1

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

缓存

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

如何检查:

转至 网络控制板。

看 尺寸 请求的列。如果您看到 from memory或 from disk cache ，它是从缓存中提供的。

缓慢的开发服务器或机器

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

如何检查:

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

前端应用程序做了太多工作

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

如何检查:

转至 性能 控制板。

Start recording .

执行导致您的应用发出初始请求的操作。

停止录音。

检查 CPU 图表。如果它完全达到极限，那么您的应用程序确实在做大量工作。

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