关于前端更新需要清空浏览器缓存

一、HTTP缓存之Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。

网页的缓存是由HTTP消息头中的“Cache-Control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

http1.1新增了 Cache-Control 来定义缓存过期时间。

注意：若报文中同时出现了 Expires 和 Cache-Control，则以 Cache-Control 为准。

Cache-Control也是一个通用首部字段，这意味着它能分别在请求报文和响应报文中使用。在RFC中规范了 Cache-Control 的格式为：

"Cache-Control" ":" cache-directive

表 1. 常用的 cache-directive 的可选值有

Cache-directive	说明
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

表 2. 对 Cache-Control 值的浏览器响应

Cache-directive	打开一个新的浏览器窗口	在原窗口中单击 Enter 按钮	刷新	单击 Back 按钮
public	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
private	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
no-cache/no-store	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器
must-revalidation/proxy-revalidation	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
max-age=xxx (xxx is numeric)	在 xxx 秒后，浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器

另外 Cache-Control 允许自由组合可选值，例如：

Cache-Control: max-age=3600, must-revalidate它意味着该资源是从原服务器上取得的，
且其缓存（新鲜度）的有效时间为一小时，在后续一小时内，用户重新访问该资源则无须发送请求。

这种组合的方式也会有些限制，比如 no-cache 就不能和 max-age、min-fresh、max-stale 一起搭配使用。

组合的形式还能做一些浏览器行为不一致的兼容处理。例如在IE我们可以使用 no-cache 来防止点击“后退”按钮时页面资源从缓存加载，但在 Firefox 中，需要使用 no-store 才能防止历史回退时浏览器不从缓存中去读取数据，故我们在响应报头加上如下组合值即可做兼容处理：

Cache-Control: no-cache, no-store

二、清理网站缓存的几种方法

1. meta方法，在html里head区添加代码（vue项目-根目录index.html）

<--如果需要在html页面上设置不缓存，这在标签中加入如下语句-->
<meta http-equiv="Pragma" content="no-cache">
<--用于设定禁止浏览器从本地机的缓存中调阅页面内容-->
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<-- Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。-->
<meta http-equiv="Expires" content="0">

2. 清理临时缓存（form表单）

<body onLoad="javascript:document.yourFormName.reset()">

3. jquery ajax清除浏览器缓存的两种方法：

//  1）、通过$.ajaxSetup 设置属性cache:false,让ajax不调用浏览的缓存:
jQuery.ajaxSetup ({cache:false})// 2）、在ajax的url后加上随机串来避免浏览缓存，随机数也是避免缓存的一种很不错的方法：
$.ajax({url:'test.php?'+parseInt(Math.random()*100000)})

4. js 代码清除缓存

（原理：增加了一个参数，且该参数是一个随机数，每次都不一样，所以每次的请求参数都不一样，服务器会将其作为一个新的请求，重新返回结果，而不会使用缓存）

<script src="lib/page.js?random=120211"></script>// css文件加一个标识 强制浏览器重新加载此文件
<link rel='stylesheet' href='css/index.css?t=120224'>   // 图片文件：
background:url(**.png?20150421) 加一个标识号，使图片不被缓存

5. Vue项目-配置 vue.config.js（使用时间戳）

const Version = new Date().getTime()module.exports = {css: {loaderOptions: {sass: {data: `@import "@/components/themes/_handle.scss";`}},// 是否使用css分离插件 ExtractTextPluginextract: {// 修改打包后css文件名filename: `static/css/[name].${Version}.css`,chunkFilename: `static/css/[name].${Version}.css`}},configureWebpack: {output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】filename: `static/js/[name].${Version}.js`,chunkFilename: `static/js/[name].${Version}.js`}},chainWebpack(config) {// img的文件名修改config.module.rule('images').use('url-loader').tap(options => {options.name = `static/img/[name].${Version}.[ext]`options.fallback = {loader: 'file-loader',options: {name: `static/img/[name].${Version}.[ext]`}}return options})}
}

6. Vue项目 - 在package.json文件中，有个属性：version，每次打包时，改变一下内容

7. 配置 nginx 不缓存 html

vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html

server {listen 80;server_name yourdomain.com;location / {try_files $uri $uri/ /index.html;root /yourdir/;index index.html index.htm;if ($request_filename ~* .*\.(?:htm|html)$){add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存}      }
}