f5到底刷新了点什么,你知道吗

9,027 阅读6分钟

引言

前面翻到了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等。他们之间的区别是什么呢。以xxdy.tech/作为例子来看一下。

再次访问(地址栏回车)

可以看到资源分下面几类: 先看下直观的请求 大部分都是200强缓存,只有文稿是304

  1. 无缓存的,maxage=0的资源

此类资源,请求的时候总会从服务端重新加载

  1. 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)

  1. 协商缓存

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,没有找到合理的解释。具体我需要在研究一下,后面补上

停用缓存并刷新

针对上面提到的哪些文件,此时就需要到下面这种清空缓存并硬性重新加载了。

操作完之后就完全不使用缓存了。

规则

上面提到那么几种刷新方式对应的效果,可能不同浏览器的实现也不同。找了个相对完善的大家可以参考一下。

结束语

到这里,关于刷新与缓存的个人一些关掉就结束了,抛砖引玉,希望能对有需要的人有所帮助,也希望有大神有所指教。更多个人博客请移步
此外感谢下面的参考文章:
stackoverflow.com/questions/8…
stackoverflow.com/questions/3…