标签: browser-cache

我是 jquery 的新手，刚刚意识到.ready当您使用浏览器的“后退”按钮返回页面时，函数中的代码并不总是会运行。从阅读 stackoverflow 上两年前的帖子来看，似乎并非所有浏览器都以相同的方式工作，并且没有单一的 jquery 函数可以解决问题。现在还是这样吗？检测页面是第一次运行还是在用户按“BACK”后再次显示的最佳方法（2012 年！）是什么？

需要明确的是：假设我有一个红色文本页面，点击后用 javascript/jquery 将单词更改为蓝色......如果我导航到新的 URL，然后按“返回”，则会发生以下情况：
Firefox - 单词仍然蓝色
IE/Chrome - 文字变回红色

Firefox
我了解 Firefox 和其他一些浏览器实现了pageshow和事件，并且在显示“bfcache”中的页面时pagehide不会触发该事件。ready在此功能中，您可以检查event.originalEvent.persisted 情况。

IE/Chrome
我知道一个技巧，用于<input type="hidden" id="dirty">跟踪页面是否在 IE/Chrome 中首次加载。不确定这有多可靠。我想我也可以尝试一块饼干。

为完全无知而道歉...

编辑：为什么这么做？
我自己的情况需要很长时间才能解释清楚，但这里有一个愚蠢的例子，也有同样的问题：想象一个显示 10 张扑克牌的页面，用户可以选择一张牌，使其在屏幕上向上移动。当您选择一张卡时，会触发一个 ajax 请求，将该卡的详细信息发送到服务器。现在想象一下您离开该页面，然后使用 BACK 返回该页面。可能会发生三种情况：
1. 浏览器可能会调用服务器来获取页面，并且服务器（数据库）知道选择了哪张卡，因此可以输出相关的 HTML/脚本
2. Firefox 将使用 bfcache 来显示您的页面 -所选择的卡片仍将被选择（向上移动），因为 DOM 的状态被准确保留（事件ready不会被命中）
3. IE/Chrome 将从缓存中重新加载原始 HTML 并调用ready事件的脚本.... .显示所有处于“未选择”位置的扑克牌。您选择的卡丢失了！

我正在尝试找到管理浏览器缓存的最佳解决方案，以在 Java/Maven 项目中重新加载修改后的 JavaScript/CSS 资源。最广泛的解决方案似乎是 Maven 过滤，以在构建时向资源 URL 添加时间戳。例如：

<script type="text/javascript" src="resource.js?v=${maven.build.timestamp}"></script>

但最有效的方法是添加文件的校验和/哈希（也称为指纹）而不是构建日期，以便在每次部署后仅在必要时才重新加载资源。我正在拼命寻找使用 Java 或 Maven 插件正确/通用地实现该模型。

有任何想法吗？

谢谢。

当服务器给出时Cache-Control: max-age=4320000，

新鲜度是在请求时间之后 4320000 秒后考虑的，还是在上次修改日期之后考虑的？

在 Firefox 32 及更高版本中，我观察到缓存管理未按预期工作。如果缓存已满，则不会缓存最新页面并逐出旧页面。

如果我使用http“POST”请求页面并离开它，如果我点击后退按钮，我会得到：“文档过期错误”。

我可以做些什么来指示 Firefox 缓存页面，即使其缓存已满，可能是通过在页面上发送任何元标头？

有没有其他方法可以解决这个问题？

大约两三年前，我会把这个问题的答案总结为：

• 将所有js编译到一个文件并缩小。
• 将所有 css 编译到一个文件并缩小。
• 异步加载外部脚本。
• 将缓存控制标头设置为遥远的未来。
• 指纹资产 URL 失效。
• 使用您自己的 CDN。

现在应用程序似乎对 javascript 的依赖要重得多。我已经看到证据表明浏览器能够打开更多并行连接。

当前包含静态资产时 Web 性能的最佳实践是什么。

当我使用像 Angular、backbone 或 ember 这样的框架时，我应该将框架与我的应用程序捆绑在一起还是使用公共 CDN（例如 google https://developers.google.com/speed/libraries/）并仅捆绑我的应用程序代码？

javascript 是否可以在不下载的情况下检查图像或脚本是否在缓存中？

我想要这样做的例子是使用公共 CDN。我想检查用户是否有从 googleapis、jquery.com 或 MS CDN 缓存的 jquery 库，只有在没有的情况下，才会浪费带宽。也许一些 xhr head 请求可以帮助我解决这个问题？

从这里的答案来看，以下代码似乎即使不插入 DOM 也会下载图像。

var i = new Image
i.src='image.jpg'
return i.complete

而且根本HTMLScriptElement没有财产。complete

我读过有关单个缓存控制标头值的内容。为了测试我学到的东西，我打开 Facebook 并进行检查。这是我得到的 Cache-Control 响应标头：

cache-control:private, no-cache, no-store, must-revalidate

我很困惑这个标头实际上告诉了什么，因为它一次包含 4 个值。那么，如果通过网络发送的资源包含这样的标头，会发生什么情况呢？

编辑：

no-store 表示“根本不存储，不在私有非公共缓存中存储”，no-cache 表示“是的，您可以缓存，但请确保在请求资源时重新验证新鲜度”。Private 表示“您可以存储在私有缓存中”。它不能同时完成这三件事。但是，我们让他们同时发送响应。看起来还有一些我不知道的附加规则。

这个问题是为了研究目的，虽然我认为这是一个敏感话题？

我的问题很简单。

“我该如何修改，而不只是从 Firefox 中提取缓存？”

但当我彻底搜索这个主题时，出现了更多问题。

首先，从所有资源中，我假设缓存的验证只是为了确保本地缓存与服务器的文件相同，但 ** ETag 和最后修改都可以被操纵来欺骗服务器**。所以我的问题1是，

如果不是出于取证目的，为什么 Firefox 和其他浏览器要努力确保没有人可以修改缓存？

其次，查阅此网页， http://encase-forensic-blog.guidancesoftware.com/2015/02/firefox-cache2-storage-breakdown.html，为什么缓存被视为“取证”？我认为有一种方法可以防止缓存修改发生，但我找不到合法的证据。所以，

像Firefox这样的浏览器使用什么方法/机制来防止缓存修改，他们如此有信心甚至可以将其用作取证证据？？？

我在 asp.net mvc 4 中开发了一个 web 应用程序，我在其中提供一些资源文件，如 css、js、图像等。

为了始终提供更新的文件，我将一个随机字符串附加到查询字符串中。当我发布应用程序时，该查询字符串值会发生变化。因此，每个发布活动都会更改该字符串。

但是即使更改了 URL，浏览器也不会下载文件。浏览器第一次下载文件，并且总是从缓存的副本中提供服务。下面是我的代码。

<script src="~/Content/js/userdefined/dashboard.js?t=@Constants.RandomString" defer></script>

public static class Constants
{
    public static readonly string RandomString = Guid.NewGuid().ToString().ToLower();
}

因此，每次发布应用程序时，它都会生成一个按预期工作的新字符串。

任何人都可以提供帮助，例如为什么即使 url 更改，浏览器也不下载更新的文件？

在我的项目中，我需要做缓存破坏，因为在新部署之后，浏览器通常只重新加载 HTML 而不是 JS 和 CSS 文件。

目前，我没有以任何方式构建 HTML，它只是已经位于公共目录中。

最简单的方法似乎是在 JS 引用中添加时间戳：

<script type="module" src="bundle/index.js?ts=20201026-102300"></script>

现在，在已经使用rollup.js的项目中实现这一目标的最佳方法是什么？

我见过@rollup/plugin-html，但我对其文档中的示例感到困惑，因为它需要一个 JS 文件作为输入：

 input: 'src/index.js',

那应该是什么JS文件？

相反，我希望需要定义

• 一个输入 HTML 文件
• 一些代码空间来设置时间戳变量
• 输出 HTML 文件

那么最好的方法是什么，是使用@rollup/plugin-html还是其他方法？