Chrome缓慢加载资源`（从磁盘缓存）` [英] Chrome slow to load resources `(from disk cache)`

问题描述

我的网站 http://www.front-end.io 配置要加载的HTTP请求第一优先级的缓存资源。所以我的标题就像：

  cache-control：max-age = 315360000 
 ETag：W /11913b -ks0rwRQM + ijHcl1HDuse3g
  

Chrome确实不会向服务器发起任何请求（即使是304）直接从缓存加载：

< img src =https://i.stack.imgur.com/5L8Wu.pngalt =在这里输入图片描述>

我的Windows10 Chrome> 400ms从本地磁盘加载js文件。

我的Ubuntu Chromium也需要大于100ms。

但FireFox只需要10ms左右！

我也发现这个问题，谷歌浏览器从缓存中加载图片慢于下载，但没有解释。

任何人都可以帮忙吗？谢谢。

解决方案

可能是错误的时间信息。

为了让Chrome Dev Tools（例如时间线）显示正确的信息，您必须禁用扩展程序才能排除它们产生的噪音。 如何使用时间轴工具文章 by Kayce Basques：

禁用扩展程序。。Chrome扩展程序可以将无关噪声添加到
时间轴记录的应用程序。在
隐身模式中打开Chrome窗口，或者创建一个新的 Chrome用户个人资料，以确保
您的环境没有扩展程序。

尽管某些扩展可以拦截资源请求，但它们并不是这些扩展之一。它没有在manifest文件中指定的 webRequestBlocking 权限。查看 chrome.webRequest页面获取更多信息。

如果您测量使浏览器从磁盘缓存中获取/vendor.61e0ab918e699695d3a3.js脚本的时间，编译并执行它，您会发现它几乎不变，无论是启用语法还是禁用。您可以使用下面的代码片段：

 < script> var startTime = performance.now（）;< / script> 
< script type =text / javascriptsrc =/ vendor.61e0ab918e699695d3a3.js>< / script> 
< script> 
 var endTime = performance.now（）; 
 console.log（Time：+（endTime  -  startTime）+[ms]。）
< / script> 
  

My site http://www.front-end.io configures the HTTP requests to load resources from cache with first priority. So my header will be like:

cache-control:max-age=315360000
ETag:W/"11913b-ks0rwRQM+ijHcl1HDuse3g"

Chrome indeed does not initiate any request (even 304) to the server, it loads from the cache directly:

It takes my Windows10 Chrome >400ms to load the js file from local disk.

My Ubuntu Chromium also takes >100ms.

But FireFox takes around 10ms only!

I found this question as well, Google Chrome load image from cache slower than download, but there are not explanations.

Could anybody help? Thanks.

解决方案

Probably that is wrong timing information.

In order to Chrome Dev Tools such as Timeline display correct information you must disable extensions to exclude noise that they produce. Relevant excerpt from How to Use the Timeline Tool article by Kayce Basques:

Disable extensions. Chrome extensions can add unrelated noise to Timeline recordings of your application. Open a Chrome window in incognito mode, or create a new Chrome user profile to ensure that your environment has no extensions.

Although some extensions can intercept resource requests in blocking fashion Grammarly is not one of those extensions. It doesn't have required webRequestBlocking permission specified in manifest file. Check chrome.webRequest page for more information.

If you measure time that took browser to get /vendor.61e0ab918e699695d3a3.js script from disk cache, compile and execute it you will see that it is pretty much constant regardless of whether Grammarly enabled or disabled. You can use code snippet below:

<script>var startTime = performance.now();</script>
<script type="text/javascript" src="/vendor.61e0ab918e699695d3a3.js"></script>
<script>
  var endTime = performance.now();
  console.log("Time: " + (endTime - startTime) + " [ms].")
</script>

这篇关于Chrome缓慢加载资源`（从磁盘缓存）`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！