大家好，我是 V 哥。今天咱们来聊一聊 Java 后端确保 JavaScript 不被缓存的问题，先来了解一下为什么需要这样做，通常源于以下几种场景或问题：
1. 先来看几个问题
1. 文件更新后无法及时生效
浏览器缓存机制是为了加快加载速度和减少服务器压力，但有时会带来问题。当 JavaScript 文件更新后，如果浏览器从缓存中加载旧版本，用户就无法看到最新的功能或修复的 Bug。举个例子：开发者发布了新版本的前端代码，修复了一个关键问题，但用户的浏览器仍然使用缓存的旧代码，导致问题依然存在。用户可能以为网站没修复或出现新问题，从而影响用户体验。
2. 前后端不一致
在 Java Web 应用中，JavaScript 通常用于与后端服务交互。如果 JavaScript 代码版本和后端逻辑不一致，可能导致不兼容问题。举个例子：后端接口的请求格式发生变化，但浏览器仍然使用旧的 JavaScript 代码，结果是客户端与服务器之间通信失败，产生错误。
3. 影响调试与开发
在开发和调试环境中，缓存会导致代码变更后无法即时看到效果，这对于调试过程非常不便。开发者可能会在调试中发现修改的代码没有被应用，导致浪费时间。举个例子：开发者修改了 JavaScript 文件，但由于缓存，浏览器继续执行旧的代码，开发者无法验证新代码是否正确，甚至可能以为代码本身有问题。
4. 安全问题
旧的缓存可能会暴露系统之前存在的漏洞。即使后端做了升级，修复了安全漏洞，但如果浏览器加载了旧的 JavaScript 文件，可能仍然会受到攻击。举个例子：假设某个版本的 JavaScript 中存在一个 XSS 漏洞。虽然新版本已经修复了这个漏洞，但浏览器缓存的旧文件仍然暴露在攻击风险中。
所以，如果前端页面无法及时响应更新（如修复 Bug、优化功能等），用户体验可能会受到负面影响。特别是在进行产品版本迭代时，缓存问题可能会使新功能看起来未上线，影响用户的使用体验和满意度。
2. 那要如何解决呢？
在 Java Web 开发中，为了确保 JavaScript 文件（或任何静态资源）不被浏览器缓存，可以使用以下几种经验：
1. 使用版本号或时间戳
为 JavaScript 文件的 URL 添加一个版本号或时间戳，使得每次文件更新后 URL 不同，这样浏览器会认为是新的资源，从而重新加载。比如：
<script src="app.js?v=1.0.1"></script>
或者使用动态的时间戳：
<script src="app.js?t=<%= System.currentTimeMillis() %>"></script>
通过这种方式，每次生成不同的查询参数，浏览器会认为这是一个新的文件，不会从缓存中读取。
2. 设置 HTTP 响应头
在 Java 后端（比如 Spring Boot 或 Servlet），可以通过设置 HTTP 头来控制缓存。常见的 HTTP 头包括：
Cache-Control: 控制缓存行为。Pragma: 控制缓存行为（主要用于兼容 HTTP/1.0）。Expires: 设置资源过期的时间。
示例代码（Spring Boot 过滤器）：
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class NoCacheFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0");
httpResponse.setHeader("Pragma", "no-cache");
httpResponse.setHeader("Expires", "0");
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void destroy() {
}
}
3. 配置静态资源的缓存策略
在 Spring Boot 项目中，可以通过配置类来定义静态资源的缓存策略。例如：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**")
.addResourceLocations("classpath:/static/js/")
.setCachePeriod(0); // 0 表示不缓存
}
}
通过 setCachePeriod(0) 设置缓存周期为 0，强制浏览器每次都从服务器获取最新的 JavaScript 文件。
4. 使用 ETag 或 Last-Modified
在 HTTP 响应中设置 ETag 或 Last-Modified，这样浏览器在每次请求时都会询问服务器资源是否更新。如果没有变化，服务器会返回 304 状态码，从而避免不必要的重新加载。
示例（设置 Last-Modified）：
httpResponse.setDateHeader("Last-Modified", System.currentTimeMillis());
上面的几种方法，能确保浏览器及时获取最新版本的 JavaScript 文件，不使用缓存的旧版本。
关于一些思考
问题来了，那什么时候可以使用缓存？
虽然缓存可能带来这些问题，但并不意味着缓存永远不好。在某些场景中，使用浏览器缓存可以显著提升性能：
- 静态资源（如 JavaScript、CSS 文件）较少更改时，缓存可以显著减少网络请求，提升页面加载速度。
- 确保在更新时有效控制缓存机制（比如用文件的版本号或哈希值作为文件名的一部分）可以避免不必要的重新下载和过度加载。
如何平衡？
通常，咱们不会完全禁止缓存，而是通过版本号、哈希、缓存控制头等方式来平衡性能和更新问题。这样，浏览器在没有必要时可以利用缓存，而在需要时也能获取最新的资源。关注威哥爱编程，码码通畅不掉发。
