标签: browser-cache

我在我的本地主机（Windows 7，Chrome v79.0.3945.130（64 位））上测试了一个 html/js 代码，大约 50% 的时间代码更改没有反映在浏览器中（我用开发工具/源看到它）。
互联网上有很多建议，但似乎都不起作用：

• 右键单击重新加载并选择“清空缓存和硬重新加载” - 在 30% 的情况下没有帮助。
• 在 Chrome 开发工具的网络选项卡中禁用缓存 - 没有帮助。
• 添加<meta http-equiv="Cache-control" content="no-cache">在标题中 - 没有帮助。
• 替换<script src="common.js"></script>为<script src="common.js?blabla"></script>- 在 60% 的情况下有帮助，但是您需要在每次更改后都执行此操作是一项繁重的工作。此外，它不适用于 html 更改。
• 将文件复制到新文件（如 index.html 到 index2.html）并替换代码中的文件名 - 总是有效，但它是一个更大的苦差事。

当我将代码提交到 github.io 时出现完全相同的问题

请帮我制作它，以便网站立即反映代码更改。

编辑：我创建了一个文件 index3.html 并在那里只放了“hello world”。在浏览器中打开文件。改为“hello world2”——浏览器更新了内容。更改为“hello world3” - 即使在多次重新加载和“清空缓存和硬重新加载”之后，浏览器仍然显示“hello world2”。我改为“hello world4”——浏览器仍然显示“hello world2”。4 个小时后，我改为“hello world5”——浏览器仍然显示“hello world2”。我用基本记事本编辑了这个文件。

Edit2：人们一直在问我正在使用什么服务器。这看起来是问题的一部分。不幸的是，我不知道，也不知道我到底需要做什么来检查它。以下是我迄今为止发现的所有内容：

• 我有inetpub/wwwroot放置 html 和 js 文件的目录，然后在浏览器中打开 index.html http://localhost/。
• Devs Tools 中的我的网络面板如下所示：image link。
• 服务器设置非常快，不需要安装任何额外的软件。即我没有使用 …

我正在尝试为我的回复添加"max-age"标题.它在我的Visual Studio开发服务器上工作正常,但只要我将应用程序移动到IIS(尝试本地IIS表达和服务器上的IIS) - 标题就会消失.

我的代码:

Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetMaxAge(new TimeSpan(1, 0, 0, 0));

VS Dev服务器响应(一切正常):

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Fri, 07 Jan 2011 14:55:04 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: public, max-age=86400

IIS7响应

HTTP/1.1 200 OK
Server: Microsoft-IIS/7.5
Date: Fri, 07 Jan 2011 15:00:54 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: public

PS.它是一个ASHX处理程序,如果它很重要......

是否有一个函数可以调用以防止浏览器在更改哈希值时记录后面的历史记录条目？

我正在编写一个简单的JavaScript库,当用户浏览每个图像时,它会更改浏览器URL而无需重新加载页面.

这可以通过将location.hash设置为图像的唯一ID来完成.

window.location.hash = imageID;

问题是当用户点击浏览器后退按钮时,他们必须向后移动每个图像,就像页面加载一样.

如果他们使用图库旋转了20张图像,则必须再次单击21次才能返回上一页.

如何防止使用javascript记录回溯历史记录？

如何编写一个过滤器,根据Google的建议(https://developers.google.com/speed/docs/best-practices/caching)适当缓存静态资源.

是否足以创建一个过滤器,将过去修改的日期设置为某个静态日期(每次服务器重新启动时都会更改)？

为所有可缓存资源指定Expires或Cache-Control max-age之一以及Last-Modified或ETag之一非常重要.指定Expires和Cache-Control:max-age或指定Last-Modified和ETag都是多余的.

上面的链接似乎建议您需要指定Expires或Cache-Control.为什么这有必要？

我正在尝试下载(并希望缓存)PHP中动态加载的图像.以下是发送和接收的标头:

请求:

GET /url:resource/Pomegranate/resources/images/logo.png HTTP/1.1
Host: pome.local
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Ubuntu Chromium/25.0.1364.160 Chrome/25.0.1364.160 Safari/537.22
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: PHPSESSID=fb8ghv9ti6v5s3ekkmvtacr9u5

响应:

HTTP/1.1 200 OK
Date: Tue, 09 Apr 2013 11:00:36 GMT
Server: Apache/2.2.22 (Ubuntu)
X-Powered-By: PHP/5.3.14 ZendServer/5.0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Disposition: inline; filename="logo"
ETag: "1355829295"
Last-Modified: Tue, 18 Dec 2012 14:44:55 Asia/Tehran
Keep-Alive: timeout=5, …

在服务工作者中，我可以定义在服务工作者开始时缓存的资源数组，如下所述：

self.addEventListener('install', event => {
    event.waitUntil(caches.open('static-${version}')
        .then(cache => cache.addAll([
            '/styles.css',
            '/script.js'
        ]))
    );
});

如何在 service worker 中定义路径/目录，以便 service worker 从给定路径/目录中选择所有文件并将所有文件添加到缓存中，而不是写入所有文件名？

我在页面上有一个"新项目"徽章,我想立即更新页面从缓存中加载(即,当点击"返回"或"转发"返回此页面时).完成此任务的最佳方法是什么？

设置非常简单.应用程序的布局每8秒查找一个新项目,并相应地更新徽章+项目列表.

$(function() {
    setInterval( App.pollForNewItems, 8000 );
});

当有人导航离开此页面以查看项目的详细信息时,可能会发生很多事情.在任何用户查看之前,事情都是"新的" ,并且应用程序可能会有多个用户同时使用它(用于呼叫中心或支持服务单的工作流程类型).

为了确保徽章始终是最新的,我有:

$(window).bind('focus load', function ( event ) {
    App.pollForNewItems();
});

..虽然这有效,但只有在从缓存加载页面时,轮询"加载"上的新项目才有用.是否有可靠的跨浏览器方式来判断是否正在从缓存加载页面？

我正在使用@ font-face嵌入在TypeFront上托管的字体,但浏览器不会缓存我的字体(Firefox 3.6.13和Epiphany 2.30.2).这导致每次页面加载时在Firefox和MFOMT(缺少文本的瞬间闪现,我只是在一个上面)的FOUC(Flash of Unstyled Content)在Epiphany上(我第一次使用FOUC/MFOMT)页面加载,但不是每次都加载).

我试图避免在可能的情况下在Base64中嵌入CSS中的字体,我不能自己托管字体.

为什么字体没有缓存？有没有其他免费的字体托管服务没有这个问题？

测试页面:

<!DOCTYPE html>
<html>
    <head>
        <title>TypeFront Cache Test</title>
        <style>
            @font-face {
                font-family: "Journal";
                src: url("http://typefront.com/fonts/825588825.ttf") format("truetype");
            }
            h1 {
                font-family: "Journal";
            }
        </style>
    </head>
    <body>
        <h1>Test text</h1>
    </body>
</html>

如果我在Firebug观察,Net标签显示的字体被送达"200 OK"每一个页面加载的时间,而不是"304未修改"或其他迹象表明,正在使用一个缓存的字体(如浏览器甚至没有尝试一个HTTP请求).

HTTP标头:

Response Headers

HTTP/1.1 200 OK
Server: nginx
Date: Sat, 26 Feb 2011 12:57:18 GMT
Content-Type: font/ttf
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Status: 200 OK
Content-Transfer-Encoding: binary
Access-Control-Allow-Origin: *
Content-Disposition: attachment; filename="typefront_735a460727.ttf"
Cache-Control: max-age=31536000
Expires: Sun, 26 Feb 2012 …

我正在使用PHP开发一个简单的网站.

开发配置:WAMP

生产配置:LAMP

在测试时,我更改了我的CSS文件,但是当我重新加载页面时,我的浏览器(不确定)仍然使用旧的缓存css.

我做了一些谷歌搜索,发现了我已经尝试过的不同解决方案

• 在css末尾附加查询 css/main.css?78923
• 使用Ctrl + R(在Firefox中)强制获取资源
• 禁用Firefox缓存以及使用Clear CacheFirefox附加组件.

当这些都不起作用时,我做了一些谷歌搜索,在那里我遇到了一个堆栈页面(这里),有人建议Apache缓存资源.所以,问题不在于Firefox,而在于服务器.那家伙还提出了一个我不理解的解决方案(我是新手)

我的问题有两个部分:

1. Apache缓存资源是真的吗？(我如何检查我的是否这样做？)
2. 如何防止缓存？

PS:在堆栈问题中复制和粘贴解决方案(我上面作为链接的那个)不起作用:(

给定一个JSON API端点/api/config,我们试图<link rel="prefetch" href="/api/config">在HTML文档的头部使用.当Chrome访问HTML中的链接标记时,Chrome会按预期下载数据,但是稍后会通过XHR从我们的脚本再次请求数据.

服务器配置为允许缓存,并Cache-Control: "max-age=3600, must-revalidate"在标头中进行响应.当Chrome再次请求数据时,服务器会以304 Not Modified状态正确响应.

用例是这样的:将始终使用XHR(AngularJS解析,如果相关)从我们的单页面应用程序中的Javascript请求配置端点.但是,我们的脚本非常大并且需要很长时间才能解析,因此在解析完成之前不会请求JSON配置.预取将允许我们使用一些解析时间来从API端点获取和缓存响应,否则必须等待脚本加载.