gpt4 book ai didi

javascript - 浏览器使用缓存而不重新验证

转载 作者:行者123 更新时间:2023-12-02 18:48:00 27 4
gpt4 key购买 nike

我正在尝试学习浏览器(Chrome/Firefox)的缓存机制。我设置了一个简单的 HTML:

    <HTML><BODY>
Hellow World

<script>
function loadJS(){
var s = document.createElement('script');
s.setAttribute('src','/myscript');
document.body.appendChild(s);
}
loadJS()
</script>

<BODY></HTML>

我为“/myscript”输出“Cache-Control: max-age:30

每次我按 F5 时,浏览器都会使用我的服务器重新验证/myscript 以获取 304 返回。

但是如果我使用

setTimeout(loadJS, 1);

每次按F5,浏览器都会检查过期时间,如果没有过期,浏览器会直接使用缓存,而不是去服务器重新验证。

我的问题是:

  1. 为什么?有详细解释吗?
  2. 这是否意味着如果我想让浏览器使用缓存并尽可能减少网络请求,我需要等待页面加载,然后再通过js请求资源?

最佳答案

我已经对浏览器缓存控制进行了大量实验,但令我惊讶的是没有人发布答案。

很多人没有注意到这一点。结果,网站无缘无故地让浏览器在图像、js 或 css 文件上执行无用的 304-notmodified 往返,这些文件在 5 年内不太可能发生变化 - 就像谁是要更改 jquery.v-whatever 吗?

无论如何,我发现当您使用 F5 或 ctrl-r 硬刷新浏览器时,Chrome 会重新验证页面上的所有内容 - 正如它应该的那样。这非常有帮助,也是您希望将 etag 保留在响应 header 中的原因。

测试 max-age 和 expires header 时,请像用户一样自然地通过单击页面上的链接来浏览网站。观察网络服务器的日志文件(我使用 http://www.apacheviewer.com ),您将很好地了解浏览器如何缓存。

设置标题有效。我不久前发布了这个:Apache: set max-age or expires in .htaccess for directory

对我来说管理 Web 服务器的最简单方法是创建一个/cache 目录并指示 apache 为每个子目录中的所有内容设置 1 年 max-age 和过期 header 。

它创造了奇迹。我的页面与服务器进行 1 次往返,而过去它们每个请求都会往返 3-5 次,只是为了得到 304。

像平常一样编写 html。浏览器将遵循 header 中的缓存设置。

只需知道硬刷新浏览器会导致浏览器忽略 max-age 并依赖 etag。

关于javascript - 浏览器使用缓存而不重新验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20824515/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com