因为如果有了刷新的动作，根据cachecontrol的值服务器会给浏览器返回304协议缓存。原理就是刷新的时候带着本地文件的版本戳去服务器请求，服务器如果比对你确实没过期，就返回一个304状态码使用本地资源。如果过期了，就返回200状态码和整个文件。对于这种刷新造成的304，移动端会明显看出有上下行缓存造成的延迟，美团有通用的解决方案 LsLoader 移动WEB工程化缓存方案美团外卖前端技术栈。
② 前端浏览器缓存机制
在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
1： 为什么需要缓存？
a：缓存可以减少用户等待时间，提升用户体验
b：减少网络带宽消耗
c：降低服务器压力
Note：缓存使用不当，也会造成‘脏数据’问题
2：常见的缓存类型
强缓存 -
Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。
Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒
所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用
协商缓存-
Last-Modified：值为资源的最后更新时间，随服务器response返回
If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存
Etag：表示资源内容的唯一标识，即资源的消息摘要
If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改
3：缓存流程图示：
a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源
b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取
Note：
1.强缓存不会发生请求，协商缓存存在服务器请求
2.当协商缓存也未命中时，则服务器会将资源发送到客户端
3.F5刷新页面，会跳过强缓存
4.Ctrl+F5刷新页面，跳过强缓存和协商缓存
5.不会缓存的情况
HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：
故事一：Last-Modified
浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。
服务器：（检查文件的修改时间）
服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。
浏览器：太好了，那我就显示给用户了。
故事二：ETag
浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的
服务器：（检查 ETag…）
服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
③ 前端页面出来了但数据还没有出来,有啥办法可以让数据一进到页面就可以拿到
尝试清除下缓存。
HTML是无法读取数据库的，HTML是页面前端脚本语言，要想从HTML网页中获取SQL数据库里的数据，需要借助JSP或ASP或PHP或RUBY等语言来实现。
检查是否有网站被选择，创建XMLHttpRequest对象，创建在服务器响应就绪时执行的函数。
④ angularjs state.go 参数 刷新页面 参数就获取不到了 怎么办
设置路由控制器
$statePrivider.state({})这个方法中的参数是对象，其中有项属性配置是cache:true/false, ，默认为true。在此，将其配置为false,此时，这个状态就不会有缓存，也就可以实现每次处于该状态时刷新页面，也就相当于实现了强制刷新。
.state('marketBeian', {
url: '/market/beian',
templateUrl: 'views/market/beian.html',
cache:false,
controller: 'MarketBeianCtrl',
data: {
title: '作业备案信息管理'
}
})
⑤ WKWebView网页缓存刷新问题
在开发过程中遇到前端改变图片文字，客户端没有实时刷新出来，抓包发现也没有请求网页相关接口。由于不懂后端的知识，折腾了很久，网上也查找了很多都说需要清除缓存。
这是在网上查找的iOS9以上清除缓存方法
不建议使用上述方法，会浪费用户流量，除非用户手动清除缓存。其实主要原因是后端网页设置的问题，通过head请求获取接口返回信息如下：
上面标粗的是关键，通过测试发现WKWebView是否通过缓存取数据还是重新请求接口取决于 Expires，如上就是缓存时效性是30分钟，想要实时刷新，可以让后端不返回这个字段或者这个过期事件设置短一些，例如1分钟。建议静态网页可以设置长时间，需要实时刷新的建议后端不要设置这个字段，以免客户端无法实时显示。
⑥ 浏览器缓存 前端页面获取存放token
//sessinonStorage只在当前窗口有效 生命随浏览器关闭终止 容量约5M
window.sessionStorage.setItem("name",'男');
//获取name
console.log(window.sessionStorage.getItem('name'));
//清空Storage
window.sessionStorage.clear();
//删除数据
window.sessionStorage.removeItem('age')
先打开a页面储存name 在打开桌面b获取时会获取不到如下图
但是在a页点击a链接跳转b却可以获取到
当跳转到b时修改name,在返回a页查看name, a页并没有发生改变（这说明a和b页面不是公用的一个sessionStorage，而是在页面跳转时a传给了b）
//localStorage在关闭浏览器后依然有效 容量约20M
//放入缓存中
window.localStorage.setItem('userToken', token);
//获取
console.log(window.localStorage.getItem("userToken"))
//删除数据
window.sessionStorage.removeItem('userToken')
⑦ 缓存页面使得刷新也不会向服务器提交请求，必须清除缓存后才会从新获取数据。
您好，很高兴为您服务！
是访问什么页面出现这种情况，能提供下链接测试下么。还有，安卓版的UC浏览器，按返回键退出时，会出现提示框提示是否清除记录，可以勾选进行退出清除。
如果仍有问题，请您继续向我们反馈，我们会第一时间为您跟进。
⑧ css和index文件都保存过,但是刷新页面没有任何效果,最大的可能是什么
有可能是客户端缓存问题。
解决方法：
1）CtrlF5，清除浏览器缓存（等同于浏览器-->历史数据-->删除cookies）注意：如果是利用F12中的Disablecache，则需要F12打开控制台才能生效。
2）在js或css后加版本号，这时候浏览器客户端会认为这是不同版本的js或者css文件，会自动重新刷新下载（浏览器会缓存下载页面js和css文件）2.1）形如：.css?v=x或者css?version=x
3）使用gulp等进行前端构建
⑨ 页面彻底缓存无法刷新，怎么办
页面彻底缓存无法刷新，怎么办
有时在处理服务器页面如表单时，浏览器前进、后退键会带来麻烦，无法使页面获取最新的数据，从而会导致意外产生，这时解决办法有两种，一是可以利用js禁用前进、后退键；二是当点击前进、后退键后自动刷新页面，那么就需要禁掉页面缓存，因为浏览器首先会读取缓存，如果没有才再请求服务器；
方法二禁用缓存如下：
客户端代码：
⑩ 网站后台更新后看不到前端页面信息更新的几点原因
一、网站没有生产静态页面
二、网站后台没有更新缓存
三、网站模板设置不正确
四、客户端浏览器缓存了网站
五、服务器或ISP缓存了网站