使用 JavaScript 使浏览器的缓存失效答案

【问题标题】：Using JavaScript to invalidate the browser's cache使用 JavaScript 使浏览器的缓存失效
【发布时间】：2011-01-11 06:42:29
【问题描述】：

我正在 Django 中做一个项目，并使用 djangos-css (http://github.com/dziegler/django-css) 和 Sass (http://sass-lang.com/)。 Sass 文件在开发中使用 django-css 提供。我想编写一个 JavaScript 例程，它将每隔一秒检索 CSS 资产。这样做的目的是让设计人员可以编辑 Sass 文件，点击保存，并立即在浏览器中查看结果，而无需切换应用程序并点击刷新。

基本上，我需要一种让 JavaScript 强制浏览器重新下载某些文件而不进行页面刷新的方法。这可能吗？

【问题讨论】：

标签： javascript css caching sass

【解决方案1】：

最简单的方法通常是在url上添加一个唯一的参数，我经常只是使用时间戳

var timestamp = (new Date()).getTime();
url += '?time=' + timestamp;

请注意，如果您的请求已经有参数，那么您需要添加 &time=' + timstamp。

浏览器无法缓存请求，因为每个请求看起来都是独一无二的。

【讨论】：

你的技术有效。我把它放在对 setInterval 的调用中。我现在遇到的问题是每次浏览器使用新的 CSS 文件重绘时，它都会闪烁。这种快速闪烁非常烦人。我想可能没有办法阻止它。有一个名为 CSSEdit (macrabbit.com/cssedit) 的应用程序允许您在 Webkit 视图中通过实时预览编辑 CSS 而无需闪烁。不幸的是，这个应用程序不支持 Sass 或类似的语言。也许答案是写一个自定义的最小浏览器？
我发现 XRefresh (xrefresh.binaryage.com) 比使用 JavaScript 更能解决这个问题。
太棒了！我用它来强制重新加载我通常缓存 10 分钟的 CPU/DB 密集型页面。 window.location.replace("/admin/home?time="+(new Date()).getTime()); // dummy cache busting parameter

【解决方案2】：

并非所有缓存都会缓存带有查询字符串的内容。

Steve Souders 建议，“……避免可缓存资源的查询字符串”。他发现在这种情况下 5-20% 的请求不会被缓存。特别是查询字符串根本不适用于某些 CDN 缓存失效。

更好的方法是为每个版本生成一个带有 javascript 文件名的 MD5，例如

{path to script file}/filename-{md5 hash}.js

【讨论】：