问题背景

前端页面开发测试完，要进行上线，某些页面上传更新到服务器之后，浏览器并没有更新，渲染的还是老页面。这是因为浏览器读了缓存导致的，需要清空缓存刷新也能看到页面的更新。但是一些用户不知道这些操作。
所以，需要解决文件变动后浏览器没有更新的问题。

一、解决办法

1、入口文件不缓存或协商缓存；其他静态资源文件缓存，然后请求每个文件的url拼接一个hash值或打包时文件名加上hash值，这个hash值可以根据文件来计算。（比对url地址，url地址不一样则不走缓存）
2、提示用户清除缓存。

二、实现原理

关于缓存

什么是缓存？ 用户第一次访问文件、数据、样式等资源都要从服务端请求，浏览器什么都没有。第二次访问则不需要反复请求，可以从缓存拿。

为什么需要缓存？ 输入网址到加载页面的过程，cpu计算、页面渲染都是比较快的，但是整个过程中比较慢的是网络请求，达到几百毫秒或一秒。所以，尽量减少网络请求数量和体积，才能更快。
使用缓存，可以优化性能，不需要每次都请求服务器，节省流量、减少服务器压力、提高加载速度
缺点：缓存内容跟服务器数据不一致；消耗内存。

哪些资源可以被缓存？ 静态资源（js css img）（webpack可以配置hash，文件更改后就可以更新，不使用缓存）

浏览器缓存一般是针对静态资源（js/css/img等），需不需要做缓存是可以根据服务器返回的字段进行控制的。
在这里插入图片描述

与缓存相关的headers：

Cache-Control：请求头/响应头。服务端认为可以缓存，就给请求头加上Catche-Control。控制缓存策略
Expires：响应头，代表资源过期时间
Last-Modified：响应头，资源最近修改时间
If-Modified-Since：请求头，资源最近修改时间。（和Last-Modified成对。即从响应头里面拿，再告诉服务器）
Ttag：响应头，资源标识
If-None-Match：请求头，缓存资源标识。（和Etag成对，由浏览器告诉服务器）

强缓存

服务器返回缓存，服务器去决定要不要缓存。比如，Catche-Control设置max-age=180000，则过了这段时间，缓存过期了才会请求服务器。或者，资源名称变了，就会在缓存过期前更新。

Cache-Control的值：

max-age：缓存将在xxx秒后过期；
no-cache：不想做缓存，让服务端处理；
no-store：不用本地缓存，也不用服务端做缓存
private：允许用户做缓存，代理服务器不能做；
public：客户端和代理服务器均可缓存

协商缓存

客户端初次请求，服务端返回资源，和资源标识。
再次请求，带着资源标识；服务器根据资源标识判断资源是否有变化。
无变化，返回304；有变化，返回200和新资源。

资源标识有（在Response Headers）：

Last-Modified 资源的最后修改时间。请求的时候带上If-Modified-Since，服务器就可以判断修改时间是否一样，不一样则说明修改过啦。
Etag 资源的唯一标识。可以根据文件计算它的值，请求时带上If-None-Match，服务器比较这个值，就可以判断是否修改。

Etag解决了 Last-Modified无法修改的问题：
1、一些文件也许会周期性更改，但是内容不变。而此时不希望客户端认为文件修改了。
2、文件修改非常频繁，秒以下时间内修改，If-Modified-Since能检查到的粒度是秒级的。那这种修改无法判断。
3、某些服务器不能精确的得到文件的最后修改时间。