实现f5效果_f5到底刷新了点什么，你知道吗

最新推荐文章于 2024-07-26 18:00:37 发布
最新推荐文章于 2024-07-26 18:00:37 发布
阅读量1.3k 收藏
点赞数
文章标签： 实现f5效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29045001/article/details/112704623
版权

本文就会去探究下不同行为下的浏览器缓存表现。也就是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/作为例子来看一下。
再次访问(地址栏回车)
可以看到资源分下面几类： 先看下直观的请求

9bb7f23ed47cd529be2fa0fd31853526.png

大部分都是200强缓存，只有文稿是304

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

8f3c26497785cf483cdbdde980f0fcc1.png

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

  1. status为200，但是后面有提示from memory cache 或者disk cache的标识。 这种缓存的字体为灰色，跟上面的200还是比较容易看出来差别的。

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

2852a76a1af92dbdb25d0dd05a1c7eab.png

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

5d368e8f8ba1519be1020a9c1a3aa9eb.png


这里就是强缓存，直接从本地缓存中读取。
因为Cache-Control:max-age=600 刷新时未过期，所以会从本地缓存中获取。

c6b4d0a223428843f5b3555e5b7c46b1.png


这里截两张图的原因在于两者缓存存放的位置是不同。 概述一下(详细请找资料细究)

  • 内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取
    时效性：一旦该进程关闭，则该进程的内存则会清空。
  • 硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

在浏览器中，大部分情况下浏览器会在js和图片等文件解析执行后直接存入内存缓存中，
那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；
而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)

  1. 协商缓存

status为304，意为与服务端对比之后文件未改变，返回原有缓存资源。

ffef3bd7c90fbc875e0c910840907f2a.png


此资源请求头里面有Cache-Control: max-age=0 ，
所以每次请求都回去服务端询问，不会走强缓存，因为服务端也未更新，etag相同，所以返回缓存资源。 总结


地址栏回车的话，就是我们正常访问，遵循浏览器的缓存策略。
f5刷新(mac 即command + r)
f5刷新的时候，会有什么不同吗，先直观对比下。

cd1903555bd5c4b141cf64d74e560eac.png


好像没什么不同，具体到文件也是与直接回车相同的状态。


总结

那么f5的刷新到底是什么呢，
可以看到f5可以被称为soft refresh 其只是reload page而已。
即与回车地址相同，正常规则下的缓存还是会涉及到。
强制刷新(command+shift+r)
此时可以看下请求结果,前面列出的304和from cache的项目都是重新load。

cd1903555bd5c4b141cf64d74e560eac.png


具体查看相应请求可以看到，
在request中多了个属性： 都有Cache-Control: no-cache的标识。
这表明每次都需要服务器评估是否有效，不要理解为直接不使用缓存。
此外可以注意到request中没有可以匹配response中ETag的If-None-Match属性，
所以会重新加载。

7423eae7428e73f117f0913a4e61db04.png

总结而言
此时的刷新可以称为hard refresh，
请求会加上一个Cache-Control:no-cache的标识来表明突破cache-control的限制，
需要服务端重新判断有效性，即不走强缓存。
另外请求header中去掉If-None-Match，这样就不能使用协商缓存。拉到新的资源
tip
这里硬性重新加载,有些文件是依旧使用缓存的，我这边看到是有些小的image，没有找到合理的解释。具体我需要在研究一下，后面补上

9aa921f5f2cc4d8171be1b6cecab3ea0.png


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

e2338b887b339ef0d85a0940742dd920.png


操作完之后就完全不使用缓存了。
规则
上面提到那么几种刷新方式对应的效果，可能不同浏览器的实现也不同。找了个相对完善的大家可以参考一下。

b60c6e5b34feed2b8f6ad911d3162cd5.png

摘自 https://juejin.im/post/5bfcd79e6fb9a04a08215cf3


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

其他tags:

provisional headers are shown (显示临时报头)

真正请求并未被发送，当使用缓存时经常发生。
之所以会出现这个信息是因为获取相关资源的请求并没有发出，
所以headers被展示并不是真正的信息。
就像提到的那样，真正的header只有在服务端返回的时候会更新。
当请求被拦截后，并没有返回。
provisional headers are shown出现的情况有这么几种：

  1. 跨域，请求被浏览器拦截
  2. 请求被浏览器插件拦截
  3. 服务器出错或者超时，没有真正的返回
  4. 强缓存from disk cache或者from memory cache，此时也不会显示

cc719f7837354ab6cafa856d8d30dce9.png

从⚠️ Provisional headers are shown 和Date字段可以看出来, 浏览器并未发出请求, 缓存依然有效, 只不过此时Status Code显示为200 OK. (甚至我还专门打开了charles, 也没有发现该资源的任何请求, 可见这个200 OK多少有些误导人的意味)

可见, 启发式缓存算法采用的缓存时间可长可短, 因此对于常规资源, 建议明确设置缓存时间(如指定max-age 或 expires).

Expires VS. max-age

Expires和max-age都是用于控制缓存的生命周期。不同的是Expires指定的是过期的具体时间，例如Sun, 21 Mar 2027 08:52:14 GMT，而max-age指定的是生命时长秒数315360000。

区别在于Expires是 HTTP/1.0 的中的标准，而max-age是属于Cache-Control的内容，是 HTTP/1.1 中的定义的。但为了想向前兼容，这两个属性仍然要同时存在。

但有一种更倾向于使用max-age的观点认为Expires过于复杂了。例如上面的例子Sun, 21 Mar 2027 08:52:14 GMT，如果你在表示小时的数字缺少了一个0，则很有可能出现出错；如果日期没有转换到用户的正确时区，则有可能出错。这里出错的意思可能包括但不限于缓存失效、缓存生命周期出错等。

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优先级比Last-Modified高, 同时存在时, 前者覆盖后者. 下面通过实例来理解下强缓存和协商缓存.

如下忽略首次访问, 第二次通过 If-Modified-Since 命中了304协商缓存.

5c7f62c9cb0cdc87fb84a281e426e529.png

强缓存

一旦资源命中强缓存, 浏览器便不会向服务器发送请求, 而是直接读取缓存. Chrome下的现象是 200 OK (from disk cache) 或者 200 OK (from memory cache). 如下:

3ab65146ecbe435db1297480fe57e94b.png

a1742c32fa64b6fc1682cf42dfd3b5c2.png

对于常规请求, 只要存在该资源的缓存, 且Cache-Control:max-age 或者expires没有过期, 那么就能命中强缓存.

man One
关注
使用AOP实现自定义缓存策略
波特多的博客
04-15 923
一 、目标 本文将会通过实例说明如何通过AOP自定义一个缓存策略，主要是调整缓存刷新的时间节点，兼顾查询速度的同时，保证数据的可靠性 一般情况下， 缓存失效是由缓存框架来进行管理的，用户可以通过设置ttl来指定key的有效时间， TTL设置太长，数据更新的不及时，TTL太短，缓存刷新也存在等待时间，达不到目标效果。 这是最常用最常用的体逻辑如： 失效：应用程序先从cache取数据，没有得到，则从...
Glide的RequestOptions
u014083081的博客
09-16 3422
6. Glide的RequestOptions 6.1 RequestOptions的API: 官方API：https://muyangmin.github.io/glide-docs-cn/javadocs/400/com/bumptech/glide/request/RequestOptions.html 参考设置：https://muyangmin.github.io/glide-docs-cn/doc/options.html 6.2 设置占位图 网络慢时图片加载不出来，需要设置默认图片； //延时
Provisional headers are shown Learn more
最新发布
m0_73367097的博客
07-26 512
Provisional headers are shown Learn more
Android图片缓存框架 - Glide的RequestOptions (四)
热门推荐
牛八少爷的专栏
01-12 2万+
目录   1. Glide API 2. Glide导入包 3. Glide 7种加载图片方式 4. 取消加载 5 Glide加载GIF 6. Glide的RequestOptions 6.1 RequestOptions的API: 6.2 设置占位图 6.3 设置错误图片 6.4 淡入淡出动画 6.5 图片大小减小剪裁 6.6 圆形图片 6.7 缩略图 6.8 缓存...
Glide源码阅读之建造者（builder）模式3【RequestOptions】【BaseRequestOptions】
lichong951的专栏
12-29 1103
Glide建造者模式的应用解析； 熟练识别组件中设计模式使用变种，一目了然这一堆参数设置和自定义意图 【设计模式】【面试】
Glide setDefaultRequestOptions 源码分析
落叶Ex的博客
04-25 781
Glide源码分析 一、现状 以下为一次Glide图片加载典型用法，会将所需相关配置写入 requestOptions 对象，通过 setDefaultRequestOptions 方法写入自定义配置。 RequestOptions requestOptions = RequestOptions.skipMemoryCacheOf(true).diskCacheStrategy(DiskCacheStrategy.NONE).d
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
10-26
总结以上，上述JavaScript代码片段提供了一种在网页中禁止用户使用F5刷新、右键点击和全屏显示的方法。这些功能在特定的使用场景下可以有效地保护页面内容或提供特定的用户交互体验。然而，考虑到用户体验和安全性，...
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
10-21
3. 在子iframe中也可以设置监听器来控制父页面的iframe元素，从而实现完全相反的效果（刷新父页面而不刷新子iframe）。这通常不是常见的需求，但技术上是可行的。 代码示例（子iframe）： ```javascript var ...
解决vue项目F5刷新mounted里的函数不执行问题
10-16
在Vue.js开发过程中，我们经常会遇到这样一个问题：在F5刷新页面后，`mounted`钩子函数中的逻辑没有被执行，导致页面的一些功能无法正常运行。本文将深入解析这个问题的原因，并提供解决方案。 首先，理解Vue的生命...
jquery禁用右键单击功能屏蔽F5刷新
10-23
本文将详细介绍如何使用jQuery实现禁用网页上的右键单击功能以及如何屏蔽F5刷新操作。 首先我们来讨论如何禁用网页上的右键单击功能。通常，当用户在网页上点击鼠标右键时，浏览器会弹出一个上下文菜单（context ...
F5.rar_js 触发f5
09-23
`beforeunload`事件是当用户尝试离开当前页面（例如通过点击刷新按钮、F5刷新或关闭浏览器）时，浏览器会先触发的事件。这个事件提供了一个机会，让开发者能够询问用户是否真的希望离开当前页面。通常，我们可以在这...
Glide源码——RequestManager
坐井观天
12-06 708
RequestManager主要有两个作用： 1.创建RequestBuilder； 2.通过生命周期管理请求的启动结束等； 创建RequestBuilder入口方法是as(Class<ResourceType> resourceClass): public <ResourceType> RequestBuilder<ResourceType> as( @NonNull Class<ResourceType> resourceClass) {
在ASP.NET Core中使用AOP来简化缓存操作
weixin_33895695的博客
11-06 943
前言 关于缓存的使用，相信大家都是熟悉的不能再熟悉了，简单来说就是下面一句话。 优先从缓存中取数据，缓存中取不到再去数据库中取，取到了在扔进缓存中去。 然后我们就会看到项目中有类似这样的代码了。 public Product Get(int productId) { var product = _cache.Get($"Product_{productId}"); if(...
android glide 如何添加头部
weixin_43988374的博客
04-01 910
Glide如何添加头部 在公司的一些项目中，为了资料的安全性需要在所有的请求中加入头部，那么图片加载也算请求 Glide工具类 在添加头部的时候会到缓存失效，APP每次都会重新加载图片，图片就会出现闪烁视差 package com.tripbay.utility import com.bumptech.glide.load.model.GlideUrl import com.bumptech.glide.load.model.Headers import java.net.URL class G
使用aop实现系统的缓存策略
wcp88888888的专栏
01-15 213
通过AOP改善项目中缓存策略 最近项目中要添加memcached来改善系统的访问速度 memcached是个很好用的缓存系统，也很好搭建和维护，这里就不做介绍 下面主要介绍一下怎么来在项目中添加memcached 现在想起来的有两种方式添加 1、在需要添加memcached的方法中都显示的添加和memcached有关的方法 2、使用aop的方式来添加memcached的策略 两个...
aop cache再讨论
求贤若渴, 礼贤下士
11-07 155
/** *作者：张荣华 *日期：2008-11-07 **/ 开门见山,一刀见血,让我们说说烦人的aop cache. aop cache解释使用aop技术的cache,可以cache被代理对象的方法返回结果,还可以通过方法的参数值来控制缓存的粒度,看上去很美,用的人估计也颇多,好东西啊,面试的时候经常有人告诉我"我用过aop cache",看来是居家必备啊.不过居家必备的东...
项目修炼之路（4）aop+注解的自动缓存
ESOO
02-17 3104
在项目中，使用缓存的方式有很多种，一般我们会封装出一个工具类以供使用，但是这样对代码的侵入性还是太强，在这里给大家介绍一种，使用自定义注解自动缓存内容，降低缓存与逻辑代码的耦合性，也省去了大家封装的时间，注意：key生成策略为（标识字符+首个参数值）
aop缓存，支持threadlocal、memory、redis
qq_17056391的博客
02-25 481
泛型反序列化 /** * 字符串转换成对象 支持多级转换以及泛型等 比如 UCRoot<List<Hospital>> 、List<Hospital> 等 * eg： * * @param jsonStr * @param types * @return */ public static Object parseObject(String jsonStr, Type[] types) { if (isBlank(jsonStr) || Arra
Unity实现AOP（用于实现缓存）
weixin_30616969的博客
01-06 212
先下载这个NUGET包。 个人理解UINITY是在IOC上实现的AOP（自己试验了好多次），所以先定义接口跟实现类。 namespace Cache { public class Talk : ITalk { [Caching(CachingMethod.Get)] public System.Collections.G...
vuex的数据点击F5刷新后会消失吗
05-10
是的，如果你使用 Vuex 存储数据，当你刷新页面时，所有存储在 Vuex 中的数据都会被清空。这是因为 Vuex 存储在内存中，而刷新页面会重新加载整个页面，因此会清除所有存储在内存中的数据。如果你想在刷新后仍然保留数据，你可以将数据存储在本地存储（如 localStorage）中，这样即使页面刷新，数据也不会丢失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值