在Chrome中使用window.location.reload和哈希碎片加载缓存不起作用 [英] Load from cache with window.location.reload and hash fragment in Chrome doesn't work

问题描述

我需要使用Javascript重新加载页面。为此，我使用 window.location.reload 。现在，我在Chrome中观察到一种奇怪的行为：Chrome始终连接到服务器并询问文档是否被修改。虽然返回了 304 Not Modified ，但仍然有一个往返于我想避免的服务器。

我也尝试明确地使用 window.location.reload（false）来告诉chrome使用缓存，但没有成功。不是说我在重新加载的url中有一个活动的散列（＃）片段。

资源的响应标题如下所示：

  HTTP / 1.1 304未修改
服务器：nginx / 1.2.2 
日期：2013年6月1日星期六13:19:56 GMT 
最后修改时间：星期六，2013年6月1日13时04分55秒格林威治标准时间
连接：保持活动状态
过期时间：Sun，2013年6月2日13:19:56 GMT 
 Cache-Control：max-age = 86400 
 Access-Control-Allow-Origin：* 
  

因此， Cache-Control 和 Expires 标题都会被设置，并且应该告诉chrome不要更新内部的资源24小时。

我不使用F5 / CMD + R重新加载页面，但是我点击了一个链接，它会有一个javascript事件，它会改变 window.location.hash ，然后调用 window.location.reload（false）。但Chrome一直在为请求设置 Cache-Control：max-age = 0 标头 - 这是我不想要的。 Chrome应该使用它的内部缓存，并且根本不会向服务器发送任何内容。

使用Firefox的相同代码没有问题，FF使用缓存版本而不连接到服务器。

我该如何解决这个问题？

编辑：这是一个简单的例子，你可以用来试用自己： http://webspace.markdown.io/reloadtest.html

编辑：我已关闭开发人员工具并通过 tcpdump -s 1024 -l -A dst port 80 验证头文件服务器。编辑2：请注意，如果关闭标签并将Url输入到新标签中，则Chrome会正确使用缓存。只有单击一个链接（这将导致 window.location.reload ）受到影响。

解决方案

在经过一番更多研究之后，回答自己：

根本无法完成。

这个问题根本与 hash 值无关，即使您不使用散列也会出现。

看来 window.location.reload（）不能用于控制当前资源（由 window.location.href ）将从缓存中使用或不使用。尽管 MDN 另有建议。<$ c $中的 Location 对象的官方W3C规范c> window 对象也没什么帮助。

Chrome和Firefox会始终执行往返向服务器请求当前资源，不管是什么p你传递给 .reload（）的参数。该参数最初被引入强制 POST 请求被重复为 GET 请求 - 这与缓存无关。 （使用Firebug时小心：我首先认为FF不会发送请求，因为它不在Firebug中显示 - 但是当您查看Web服务器日志时，您可以看到它实际上是这样）。

我可以观察到布尔参数的存在会影响浏览器是否将一个 Cache-Control：max-age = 0 头添加到请求即可。但是这只会减少传输的数据，并不会消除服务器连接。任何情况下都可以往返。

I need to reload the page in Javascript. I use window.location.reload for that purpose. Now, I observe a strange behaviour in Chrome: Chrome always connects to the server and asks if the document was modified. Though a 304 Not Modified is returned, there is still a roundtrip to the server that I want to avoid.

I've also tried explicitly using window.location.reload(false) to tell chrome to use the cache, but without success. Not that I have an active hash (#) fragment in the url that I reload.

The response headers of the resource are as following:

HTTP/1.1 304 Not Modified
Server: nginx/1.2.2
Date: Sat, 01 Jun 2013 13:19:56 GMT
Last-Modified: Sat, 01 Jun 2013 13:04:55 GMT
Connection: keep-alive
Expires: Sun, 02 Jun 2013 13:19:56 GMT
Cache-Control: max-age=86400
Access-Control-Allow-Origin: *

So, the Cache-Control and the Expires header are both set and should tell chrome not to update the resource within 24hours.

I do not reload the page using F5/CMD+R, but instead I click on a link, that will have a javascript event that will change window.location.hash and then call window.location.reload(false). But Chrome keeps setting the Cache-Control: max-age=0 header for the request - which I don't want. Chrome should use it's internal cache and not send anything to the server at all.

There is no problem with the same code using Firefox, FF uses the cached version without connection to the server at all.

How can I fix this?

EDIT: Here is a simple example that you can use to tryout yourself: http://webspace.markdown.io/reloadtest.html

EDIT: I have developer tools closed and verify the headers via tcpdump -s 1024 -l -A dst port 80 on the server. I have also unticked "disable browser cache" in the developer tools.

EDIT 2: Note that if close the tab and enter the Url into a new one, Chrome correctly uses the cache. Only clicking a link (which will result in a window.location.reload is affected.

解决方案

Answering myself, after some more research:

It simply can't be done.

The problem is not related to the hash value at all, and arises even if you don't use a hash.

It seems window.location.reload() can not be used to control whether or not the current resource (indicated by window.location.href) is to be used from cache or not. Although the documentation on MDN suggests otherwise. The official W3C specs on the Location object in the window object are also not much of help.

Chrome and Firefox will always perform a round-trip to the server, asking for the current resource, no matter what parameter you pass to .reload(). The parameter was originally introduced to force POST requests be repeated as GETrequests - this has nothing to do with caching. (Carefull when using Firebug: I first thought FF does not send a request because it is not shown in Firebug - but when you look at the webserver logs, you can see that it actually does).

I can observe that the presence of the boolean parameter influences whether or not the browser will append a Cache-Control: max-age=0 header to the request. But this only reduces the data that is transfered, and will not eliminate the server connection at all. A roundtrip is done in any case.

这篇关于在Chrome中使用window.location.reload和哈希碎片加载缓存不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！