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

问题描述

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

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).

但是，使用重播XHR"菜单重播呼叫时，内容"下载周期从2.13 s急剧下降到2.11 ms(如以下屏幕截图所示).数据不会在浏览器级别缓存.

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

重播相同示例

有人可以解释为什么内容下载时间太慢以及如何改进吗?

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

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

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

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

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

提前感谢您的支持！

推荐答案

我无法最终告诉您造成这种情况的原因，但是我可以提供一些可以调查的变量，这可以帮助您了解正在发生的事情.

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.

我知道您说过数据不会在浏览器级别缓存，但是我建议再次检查一下.因为初始请求需要2s，然后重复请求仅需要2ms的事实确实听起来像是缓存.

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.

如何检查:

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

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.

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

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.

如何检查:

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

前端应用程序工作量过多

我不确定最后一个是否真的有意义，但是值得一试.也许您的Angular应用在最初的请求期间正在执行大量的JS工作，这使您的CPU耗尽.因此，当您发出初始请求时，整个浏览器就会停滞.

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.

如何检查:

1. 转到"性能"面板.
2. 开始录制.
3. 执行导致您的应用发出初始请求的操作.
4. 停止录制.
5. 检查 CPU 图表.如果完全用尽，那么您的应用程序确实可以完成很多工作.

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屋！