防止浏览器缓存 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 被缓存。当他们回来时，它可以加快网页的加载速度。添加时间戳后，您的用户将被迫一次又一次地下载它。

如果您想确保它们始终具有新版本，请让您的构建系统在文件末尾添加构建号而不是时间戳。

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

Answer 2

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

您的 Web 服务器可以发送这些标头（在它提供的每个 JS 和 CSS 文件上）来告诉浏览器不要缓存它们：

Cache-Control: no-store
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 取决于服务器。通常并不难。

我以前见过你使用的 hack。就像网络上的很多东西一样，它不是很漂亮，也不是特别高效，但它确实有效。

Answer 3

如果我们想要防止缓存的原因是为了确保在我们发布新版本时加载较新版本的文件。，您希望在有新版本时加载新的 js，而不是所有的时间。

为了做到这一点，您希望“ts”值与文件链接，而不是与一天中的时间链接。
您可以使用以下系统之一：

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

这样，浏览器仅在文件是新的时才会重新加载该文件，而不是每次都重新加载。

Answer 4

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

Answer 5

编辑

如果您使用 Spring Boot，现在可以更简单地防止缓存已修改的文件。

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

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

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

在这里阅读更多内容：

现在下面是我的“旧”帖子，它也可以工作，但需要更多工作。

---

由于您使用的是 Java，因此您也有可能使用 Maven 来管理您的项目。

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

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

pom.xml 的摘录应该可以帮助您入门：

<properties>
    <timestamp>${maven.build.timestamp}</timestamp>
    <maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format>
</properties>

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.6</version>
    <executions>
        <execution>
            <id>minify-css</id>
            <phase>process-resources</phase>
            <goals>
                <goal>minify</goal>
            </goals>
            <configuration>
                <linebreak>-1</linebreak>
                <cssSourceDir>resources/css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>bootstrap.css</cssSourceFile>
                    <cssSourceFile>style.css</cssSourceFile>
                </cssSourceFiles>
                <cssTargetDir>resources/css</cssTargetDir>
                <cssFinalFile>${timestamp}.css</cssFinalFile>
            </configuration>
        </execution>
        <execution>
            <id>minify-js</id>
            <phase>process-resources</phase>
            <goals>
                <goal>minify</goal>
            </goals>
            <configuration>
                <linebreak>-1</linebreak>
                <jsSourceDir>resources/js</jsSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>jquery.js</jsSourceFile>
                    <jsSourceFile>bootstrap.js</jsSourceFile>
                    <jsSourceFile>script.js</jsSourceFile>
                </jsSourceFiles>
                <jsTargetDir>resources/js</jsTargetDir>
                <jsFinalFile>${timestamp}.js</jsFinalFile>
            </configuration>
        </execution>
    </executions>
</plugin>

<plugin>
    <groupId>com.google.code.maven-replacer-plugin</groupId>
    <artifactId>replacer</artifactId>
    <version>1.5.2</version>
    <executions>
        <execution>
            <id>replaceDynPartInResourcePath</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>replace</goal>
            </goals>
            <configuration>
                <ignoreMissingFile>false</ignoreMissingFile>
                <basedir>${project.build.directory}</basedir>
                <file>${project.artifactId}/WEB-INF/views/header.jsp</file>
                <regex>false</regex>
                <replacements>
                    <replacement>
                        <token>$dynamicResourceNamePart
lt;/token>
                        <value>${timestamp}</value>
                    </replacement>
                </replacements>
            </configuration>
        </execution>
    </executions>
</plugin>

This is how to include your static resources in header.jsp

<c:choose>
    <c:when test="${not fn:contains(pageContext.request.serverName, 'localhost') and empty param.nocombine}">
        <link href="${pageContext.request.contextPath}/resources/css/$dynamicResourceNamePart$.min.css" rel="stylesheet" type="text/css" />
        <script src="${pageContext.request.contextPath}/resources/js/$dynamicResourceNamePart$.min.js" type="text/javascript"></script>
    </c:when>
    <c:otherwise>
        <link href="${pageContext.request.contextPath}/resources/css/bootstrap.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/resources/css/style.css" rel="stylesheet">
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/bootstrap.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/script.js"></script>
    </c:otherwise>
</c:choose>

Answer 6

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

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

Answer 7

如果您可以在应用程序中包含 Java Servlet Filter，这里有一个可行的解决方案： CorrectBrowserCacheHandlerFilter.java

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

这样做，浏览器将永远不会缓存在 index.html 中声明的静态文件（因为总是会收到 302 Moved Temporarily），而只会缓存那些与哈希版本（服务器将为他们回答200）。因此，对于那些具有哈希版本的静态文件，浏览器缓存将得到有效利用。

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