如何对静态对象（jquery.js 库）实现浏览器端缓存？

基础实现：HTTP缓存头配置（最常用、成本最低的方案） #

HTTP缓存是浏览器原生支持的缓存机制，不需要额外写前端代码，只需要配置服务端的响应头即可实现，分为两类：

• 强缓存：配置后浏览器在缓存有效期内不会向服务器发请求，直接读取本地缓存，性能最优。
  常用响应头配置：
  • Cache-Control: public, max-age=31536000, immutable：表示资源允许所有中间节点（CDN、代理等）和浏览器缓存，有效期为1年，有效期内资源内容不会变更。
  • 注意：如果后续需要更新资源，只需要给静态资源的文件名加上内容哈希后缀即可（比如index.7e2c49a2.js），资源内容变更后哈希值会变化，对应文件名改变，浏览器就会自动请求新的资源，不会命中旧缓存。
• 协商缓存：适合不适合设置长有效期的资源，浏览器每次请求会先询问服务器资源是否有更新，无更新则返回304状态码，浏览器直接读取本地缓存，有更新才返回新的资源内容。
  常用响应头配置组合：
  • Last-Modified + 请求头If-Modified-Since：基于资源最后修改时间判断是否更新
  • ETag + 请求头If-None-Match：基于资源内容的唯一标识判断是否更新，精确度比修改时间更高

进阶实现：自定义缓存规则 #

如果需要更灵活的缓存控制（比如离线访问、自定义缓存命中逻辑），可以用以下方案：

• Service Worker缓存：运行在浏览器后台的独立线程，可以拦截所有页面的网络请求，自定义缓存策略（比如优先读缓存、优先走网络、缓存优先失败后降级等），适合PWA场景，仅支持HTTPS和localhost环境。
• 本地存储缓存：小体积的资源或者业务数据可以自行存储到前端存储中，自行写逻辑判断是否使用本地缓存：
  • localStorage：持久化存储，容量上限约5MB，适合存储小体积文本类资源
  • IndexedDB：非关系型数据库，容量上限可达数百MB，支持存储二进制文件，适合大体积资源的自定义缓存

注意事项 #

• 不要给HTML入口文件设置过长的强缓存，建议给HTML配置协商缓存即可，避免用户无法获取最新的页面入口，导致一直加载旧的静态资源。
• 强缓存生效期间如果直接修改原文件内容、不变更资源URL，用户端依旧会命中旧缓存，不会拿到新资源。

内容的提问来源于stack exchange，提问作者sergej.p