防止JavaScript文件的浏览器缓存的更好方法

Question

这就是我们如何防止浏览器缓存JS和CSS文件.这似乎有点hacky ..有更好的方法吗？

<%
//JSP code
long ts = (new Date()).getTime(); //Used to prevent JS/CSS caching
%>

<link rel="stylesheet" type="text/css" media="screen" href="/css/management.css?<%=ts %>" />
<script type="text/javascript" src="/js/pm.init.js?<%=ts %>"></script> 
<script type="text/javascript" src="/js/pm.util.func.js?<%=ts %>"></script> 

---

更新:我们想要阻止缓存的原因是为了确保在我们执行新版本时加载更新版本的文件.

Answer 1

您希望缓存CSS和JS.当它们返回时,它加速了网页的加载.添加时间戳,您的用户将被迫一次又一次地下载它.

如果要确保它们始终具有新版本,请使构建系统在文件末尾添加内部版本号而不是时间戳.

如果您只是在dev中遇到问题,请确保将浏览器设置为不缓存文件或将开发页面上的标题设置为不缓存.

Answer 2

缓存是你的朋友.如果浏览器错误地缓存这些文件,则意味着Web服务器与JS和CSS文件本身(而不是使用它们的HTML页面)一起发送的HTTP标头出现问题.浏览器使用这些标头来确定它是否可以缓存文件.

您的Web服务器可以发送这些标头(在它所服务的每个JS和CSS文件上),告诉浏览器不要缓存它们:

Cache-Control: no-cache
Pragma: no-cache
Expires: Sat, 01 Jan 2000 00:00:00 GMT

但这会增加您网站的网络负载,用户会看到网页加载速度变慢.您可以稍微宽松一点,并允许浏览器缓存CSS文件60秒:

Cache-Control: max-age=60

如果您确实希望浏览器检查每个页面加载的新文件,您仍然可以使用ETag来节省一些网络流量:

Cache-Control: max-age=0
Pragma: no-cache
Expires: Sat, 01 Jan 2000 00:00:00 GMT
ETag: "o2389r-98ur0-w3894tu-q894"

ETag只是每次文件更改时Web服务器组成的唯一标识符.下次浏览器需要该文件时,它会询问服务器"/js/pm.init.js是否还有ETag o2389r98ur0w3894tuq894？" 如果是这样,你的服务器只是说"是".这样,您的服务器不必再次发送整个文件,用户不必等待它加载.双赢.

如何说服您的Web服务器自动生成ETag取决于服务器.这通常不难.

我见过你之前使用的黑客.就像在网上这么多,它不漂亮或特别有效,但它的工作原理.

Answer 3

如果我们想要阻止缓存的原因是确保在我们执行新版本时加载更新版本的文件.,你想要在新版本发布时加载新的js,而不是所有的时间.

为了做到这一点,你希望"ts"值与文件链接而不是与一天中的时间相关联.您可以使用以下系统之一:

1. ts =文件的时间戳
2. ts =文件的MD5(或任何校验和)
3. ts =代码的版本.如果您有一个执行部署的脚本,请确保它在一些将分配给ts的包含文件中添加版本代码(或发布日期).

通过这种方式,浏览器将仅在新文件时重新加载文件,而不是所有时间.