f5到底刷新了点什么，你知道吗
引言
前面翻到了http缓存相关内容，关于强制缓存和协商缓存，他们之间的差别可能大家比较清楚。
并且常规情况下是否该使用缓存以及使用哪种缓存，相关文章多且全，这里不再赘述。
不过用户的不同行为会打破原有规范，本文就会去探究下不同行为下的浏览器缓存表现。
也就是f5到底刷新了哪些内容
浏览器缓存
说道浏览器缓存，脑海中常见的应该是那么几种关键词：Cache-Control、Expires、ETag、If-Match、If-None-Match、Last-Modified等。根据不同标识的作用，再次访问某个资源时，需要缓存的情况下，主要有下面两种缓存方式
强缓存
一旦资源命中强缓存, 浏览器便不会向服务器发送请求, 而是直接读取缓存. Chrome下的现象是 200 OK (from disk cache) 或者 200 OK (from memory cache).
协商缓存
也就是我们常见的304状态码。
缓存过期后, 继续请求该资源, 对于现代浏览器, 拥有如下两种做法:
- 根据上次响应中的ETag_value, 自动往request header中添加If-None-Match字段. 服务器收到请求后, 拿If-None-Match字段的值与资源的ETag值进行比较, 若相同, 则命中协商缓存, 返回304响应.
- 根据上次响应中的Last-Modified_value, 自动往request header中添加If-Modified-Since字段. 服务器收到请求后, 拿If-Modified-Since字段的值与资源的Last-Modified值进行比较, 若相同, 则命中协商缓存, 返回304响应.
ETag是http/1.1新增标识，也是为了解决Last-Modified存在的例如服务器和客户端时间不同步等问题，所以比Last-Modified的优先级高。
因此常见情况下，资源的缓存就是按照上面的顺序，强缓存=>协商缓存=>重新获取。但是，缓存策略是与用户的操作相关的，平时不可避免会用到刷新，刷新的方式是多种多样的。刷新按钮，command+r，shift+command+r等。他们之间的区别是什么呢。以http://xxdy.tech/作为例子来看一下。
再次访问(地址栏回车)
可以看到资源分下面几类：
先看下直观的请求
大部分都是200强缓存，只有文稿是304
- 无缓存的，maxage=0的资源
此类资源，请求的时候总会从服务端重新加载
- status为200，但是后面有提示from memory cache 或者disk cache的标识。这种缓存的字体为灰色，跟上面的200还是比较容易看出来差别的。
js的响应
这里就是强缓存，直接从本地缓存中读取。因为Cache-Control:max-age=600 刷新时未过期，所以会从本地缓存中获取。
这里截两张图的原因在于两者缓存存放的位置是不同。
概述一下(详细请找资料细究)
-
内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性
快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取
时效性：一旦该进程关闭，则该进程的内存则会清空。 -
硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。
在浏览器中，大部分情况下浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)
- 协商缓存
status为304，意为与服务端对比之后文件未改变，返回原有缓存资源。
此资源请求头里面有Cache-Control: max-age=0 ，
所以每次请求都回去服务端询问，不会走强缓存，因为服务端也未更新，etag相同，所以返回缓存资源。
总结
地址栏回车的话，就是我们正常访问，遵循浏览器的缓存策略。
f5刷新(mac 即command + r)
f5刷新的时候，会有什么不同吗，先直观对比下。
好像没什么不同，具体到文件也是与直接回车相同的状态。
总结
那么f5的刷新到底是什么呢，
可以看到f5可以被称为soft refresh 其只是reload page而已。
即与回车地址相同，正常规则下的缓存还是会涉及到。
强制刷新(command+shift+r)
此时可以看下请求结果,前面列出的304和from cache的项目都是重新load。
具体查看相应请求可以看到，在request中多了个属性：
都有Cache-Control: no-cache的标识。这表明每次都需要服务器评估是否有效，不要理解为直接不使用缓存。
此外可以注意到request中没有可以匹配response中ETag的If-None-Match属性，所以会重新加载。
总结而言
此时的刷新可以成为hard refresh，此时请求会加上一个Cache-Control: no-cache的标识来表明突破cache-control的限制，需要服务端重新判断有效性，即不走强缓存。
另外请求header中去掉If-None-Match，这样就不能使用协商缓存。
tip
这里硬性重新加载,有些文件是依旧使用缓存的，我这边看到是有些小的image，没有找到合理的解释。具体我需要在研究一下，后面补上
停用缓存并刷新
针对上面提到的哪些文件，此时就需要到下面这种清空缓存并硬性重新加载了。
操作完之后就完全不使用缓存了。
规则
上面提到那么几种刷新方式对应的效果，可能不同浏览器的实现也不同。找了个相对完善的大家可以参考一下。
结束语
到这里，关于刷新与缓存的个人一些关掉就结束了，抛砖引玉，希望能对有需要的人有所帮助，也希望有大神有所指教。更多个人博客请移步
此外感谢下面的参考文章：
https://stackoverflow.com/questions/8589760/difference-between-f5-ctrl-f5-and-click-or-refresh-button
https://stackoverflow.com/questions/385367/what-requests-do-browsers-f5-and-ctrl-f5-refreshes-generate