移动端H5缓存问题

kelly0721

已于 2025-01-15 15:46:37 修改

阅读量1.5k

点赞数 22

分类专栏：前端文章标签：缓存前端

于 2025-01-15 15:42:59 首次发布

本文链接：https://blog.csdn.net/kelly0721/article/details/145161871

版权

移动端页面缓存问题是指页面的静态资源（如图片、JS 和 CSS 文件）在浏览器中被缓存后，用户在下次访问时可以直接从本地获取缓存数据，而不需要每次都从服务器重新获取，不过这样可能会导致页面不能正确地更新或者加载最新的内容。为了解决这个问题，我们可以采用一些缓存控制策略来解决。

一、缓存的基本原理

浏览器缓存是指当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

浏览器缓存分为：

协议缓存和 webview中缓存的场景出现的比较多，本文中只聊这两种缓存。

首先，我们需要了解 WebView 和浏览器是如何缓存资源的。浏览器和 WebView 会缓存网络请求的资源，以提高页面加载速度，并减少网络流量。这种缓存机制对于一些资源是有益的，比如图片、样式文件、JavaScript 文件等，它们往往没有频繁变化，缓存可以节省加载时间和带宽。

然而，WebView 和浏览器也有缓存 HTML 文件的行为，尤其是当 URL 不发生变化时。此时，即使前端代码已经更新，浏览器或 WebView 可能会加载缓存中的旧版 HTML 和 JavaScript 资源，导致页面展示的内容不是最新的。

首次请求：浏览器发起 HTTP 请求并从服务器获取资源（HTML、CSS、JS、图片等），服务器响应时会带上相关的缓存头（如 Cache-Control）。
缓存保存：浏览器根据响应头部信息将资源缓存到本地存储（如内存缓存或硬盘缓存）。
后续请求：当用户再次访问相同资源时，浏览器会检查缓存是否有效，如果缓存未过期或未被清除，则直接使用缓存中的资源。如果资源过期，浏览器会向服务器发起验证请求，服务器通过 ETag 或 Last-Modified 确认资源是否变化，如果没有变化，浏览器将继续使用缓存的副本。

一是静态资源（js、css、image），二是 HTML 本身，都可能会被缓存。

如果资源已被缓存且没有过期，资源的 URL 没有发生变化，浏览器会先加载缓存的资源。如 html 中引用 a.js, 用户刷新页面时，a.js 会从浏览器缓存中获取，而不是从服务器中获取
如果 js、css、img 静态资源做了版本号处理，但 HTML 本身没有重新请求，也是会导致渲染原来的HTML页面
需要我们自动检测更新，并自动更新的场景（这个比较适用于场景2 和场景3。因为场景1通常情况下我们不考虑）：
- 场景1：用户开启着的浏览器，未刷新过页面；
- 场景2：我们提供给任意第三方的嵌入式 js 文件，如 webapp.js，第三方未知，且我们也无法修改第三方的 html 代码；
- 场景3：移动端 APP 嵌入到一级 NavBar 中的 H5 页面，为了用户体验设计，切换菜单时，并不销毁 webview，所以现象就是不杀掉 APP，H5页面不会刷新。

HTTP 协议缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制资源缓存的机制。

HTTP 协议提供了几个重要的参数，用来控制缓存的行为：

Cache-Control：最常用的缓存控制头部。通过设置不同的值来告诉浏览器是否缓存资源，以及缓存多长时间。例如：
- Cache-Control: no-cache：每次请求都需要检查资源是否更新（强制验证缓存）。
- Cache-Control: no-store：禁止缓存，浏览器每次都从服务器加载资源。
- Cache-Control: max-age=：指定缓存的最大有效期（单位为秒），过期后需要重新从服务器获取资源。
- Cache-Control: public：资源可以被任何缓存（如浏览器或代理服务器）缓存。
  ○Cache-Control: private：资源只能被浏览器缓存，不能被共享缓存（如 CDN 或代理服务器）缓存。
Expires：指定资源过期的日期和时间，表示资源在此时间之后不再有效，需重新获取。与 Cache-Control 配合使用时，Cache-Control 优先级更高。
ETag 和 Last-Modified：用于浏览器和服务器之间的资源验证。如果资源没有变化，浏览器可以使用缓存的副本；如果变化了，服务器会返回新的版本。