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

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

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

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

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

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

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

缓存是你的朋友。 如果浏览器错误地缓存这些文件,则意味着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取决于服务器。 这通常不难。

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

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

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

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

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

一种简单的方法是使用URL中的js或css文件的最后修改日期而不是时间戳。 只有当服务器上有新版本的文件时,这才会起到防止缓存的作用。

编辑

如果您使用的是Spring Boot,现在可以更加简单地防止对已修改文件进行缓存。

您需要做的就是将其添加到application.properties:

 spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/** 

如果您使用的是Thymeleaf或FreeMarker,它将完全自动配置。 如果您使用的是JSP,则需要手动声明ResourceUrlEncodingFilter。

在这里阅读更多内容: http : //docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content

接下来是我的“旧”post,它也有效但需要更多的工作。


由于您使用的是Java,因此您有可能还使用maven来管理项目。

在这种情况下,为了提高性能,并确保在生成新版软件时没有浏览器缓存静态资源,您应该将所有样式表和JavaScript文件合并到其类型的单个文件中,并且您应该在创建新版本时更改资源URL。

幸运的是,maven可以在构建时为您完成所有这些工作。 你需要minify-maven-pluginmaven-replacer-plugin

这段pom.xml的摘录应该让你开始:

  ${maven.build.timestamp} yyyyMMddHHmm   com.samaxes.maven minify-maven-plugin 1.6   minify-css process-resources  minify   -1 resources/css  bootstrap.css style.css  resources/css ${timestamp}.css    minify-js process-resources  minify   -1 resources/js  jquery.js bootstrap.js script.js  resources/js ${timestamp}.js      com.google.code.maven-replacer-plugin replacer 1.5.2   replaceDynPartInResourcePath prepare-package  replace   false ${project.build.directory} ${project.artifactId}/WEB-INF/views/header.jsp false   $dynamicResourceNamePart$ ${timestamp}       

这是如何在header.jsp中包含静态资源

              

出于调试目的,安装FireFox的Web开发人员工具栏并激活“停用缓存”

更新:
安装FireBug后,您也可以在网络选项卡设置中禁用缓存 。

如果您可以在应用程序中包含Java Servlet Filter,那么这是一个可行的解决方案: CorrectBrowserCacheHandlerFilter.java

基本上,当您的浏览器请求静态文件时,服务器会将每个请求重定向到同一个请求,但使用哈希查询参数(例如?v=azErT ),这取决于目标静态文件的内容。

这样做,浏览器永远不会缓存index.html声明的静态文件(因为它总是会收到302 Moved Temporarily ),但只会缓存带有哈希版本的那些(服务器将为它们回答200 )。 因此,浏览器缓存将有效地用于具有哈希版本的静态文件。

免责声明:我是CorrectBrowserCacheHandlerFilter.java的作者。