跳到主要内容

缓存问题

禁止index.html缓存​

  • 如果 index.html 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 index.html 的缓存
  • 对于保证每次发布新版本时用户能立即获取最新资源非常重要
  • 保证每次前端发版部署，index.html都是最新的，当index.html更新时，里面的脚本当发生变化都会重新获取资源

如果缓存了index.html会造成的问题？

  • 比如缓存了index.html，静态资源都放在了CDN，那么前端每次部署更新的时候，由于了缓存了index.html，页面及时强刷新了，也是看到旧的内容，旧的index.html。因为index.html引用的js、css的脚本都是旧的，如果不禁止缓存index.html， 会导致需要刷新CDN （去源站拿到最新资源)， 用户才能看到最新的内容

html禁止缓存​

  • 通过 html meta 标签禁用缓存：
  • 这些meta标签有助于兼容旧版浏览器，但现代浏览器主要依赖HTTP响应头来决定缓存策略。因此，结合服务器端配置会更有效
html
<!DOCTYPE html>
<html lang="en">
<head>

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

</head>
</html>

nginx禁止缓存​

bash
# nginx.conf
location / {
  index index.html index.htm;

 # 禁止index.html缓存
  if ($uri = '/index.html' ) { 
    add_header Cache-Control "no-cache, no-store, must-revalidate";
  }

  try_files $uri $uri/ /index.html;
}

缓存标识​

响应标头​

x-cache​

  • x-cache HIT TCP_MEM_HIT dirn:-2:-2
    • 通过MEM_HIT标识 表示缓存
  • x-cache MISS TCP_MISS dirn:-2:-2
    • 通过MISS标识 表示不缓存

cache-control​

  • no-store
    • 表示不缓存

CDN缓存问题​

只缓存前端的静态资源

  • 1、只缓存js、css等静态文件
  • 2、不缓存index.html
  • 3、不缓存接口数据，避免接口数据缓存，造成每个用户看到的数据都是一样