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还是比较容易看出来差别的。

css资源的响应，来自硬盘缓存。

js的响应，即来自memory的缓存

这里就是强缓存，直接从本地缓存中读取。
因为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