Chrome 网络计时，如何改进内容下载 [英] Chrome network Timing , how to improve Content Download

问题描述

我在 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

提前感谢您的支持！

解决方案

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

缓存

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

如何检查:

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

缓慢的开发服务器或机器

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

如何检查:

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

前端应用做了太多工作

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

如何检查:

1. 转到性能面板.

2. 请留下评论，如果这些有帮助，请告诉我.

   I was checking for XHR calls timing in Chrome DevTools to improve slow requests but I found out that 99% of the response time is wasted on content download even though the content size is less than 5 KB and the application is running on localhost(Working on my local machine so no Network issues).

   But when replaying the call using Replay XHR menu, the Content download period drops dramatically from 2.13 s to 2.11 ms(as shown in the screen shots below). Data is not cached at browser level.

   • Example of Call Timing

   • Same Example Replayed

   Can someone explain why the content download timing is slow and how to improve it?

   The Application is an ASP.NET mvc 5 solution combined with angularJS.

   The Web Server Details: - Windows Server 2012 R2 - IIS 8

   Thank you in advance for your support!

   解决方案

   I can't conclusively tell you the cause of this, but I can offer some variables that you can investigate, which might help you figure out what's going on.

   Caching

   I know you said that the data is not getting cached at the browser level, but I'd suggest checking that again. Because the fact that the initial request takes 2s, and then the repeat request only takes 2ms really does sound like caching.

   How to check:

   1. Go to Network panel.
   2. Look at Size column for the request. If you see from memory or from disk cache, it was served from the cache.

   Slow development server or machine

   My initial thought was that you're doing more work on your development machine than it can handle. Maybe the server requires more resources than your machine can handle. Maybe you have a lot of other programs running and your memory / CPU is getting maxed.

   How to check:

   1. Run your app on a more powerful server and see if the pattern persists.

   Frontend app is doing too much work

   I'm not sure this last one actually makes sense, but it's worth a check. Perhaps your Angular app is doing a crazy amount of JS work during the initial request, and it's maxing out your CPU. So the entire browser is stalling when you make the initial request.

   How to check:

   1. Go to Performance panel.
   2. Start recording.
   3. Do the action that causes your app to make the initial request.
   4. Stop recording.
   5. Check the CPU chart. If it's completely maxed out, then your app is indeed doing a bunch of work.

   Please leave a comment and let me know if any of these helped.

   这篇关于Chrome 网络计时，如何改进内容下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！