前言
在项目中,经常会遇到明明刷新了页面 但是页面中的css
样式没有发生变化或者js
事件没有执行,原因就出在刷新的问题上。谷歌的Ctrl+R
和F5
刷新对应,而Ctrl+Shift+R
和Ctrl+F5
刷新对应。
Ctrl+Shift+R与Ctrl+F5
Google
给的定义是硬性重新加载,所有的资源(静态资源、ajax请求)都会从服务器重新再次请求,不会被浏览器所缓存。
Ctrl+R与F5
Google
给的定义是正常重新加载,也就是说浏览器会缓存在内存或者磁盘当中。
这是第一次的network
这是通过F5刷新的network
可以看到
js
和img
后面的size
字段和之前的不一样了,变成了from memory cache
,那么是什么意思呢?有几种呢?
size 选项的 4 种情况
1.资源的大小
2.from disk cache
3.from memory cache
4.from ServiceWorker
from disk cache
表示此资源是取自磁盘
,不会请求服务器。已经在之前的某个时间加载过该资源,但是此资源不会随着该页面的关闭而释放掉,因为是存在硬盘当中的,下次打开仍会 from disk cache
。
from memory cache
表示此资源是取自内存
,不会请求服务器。已经加载过该资源且缓存在内存当中;关闭该页面此资源就被内存释放掉了,再次打开相同页面时不会出现 from memory cache
的情况。
资源本身大小数值
当 http 状态为 200 是实实在在从浏览器获取的资源,当 http 状态为 304 时该数字是与服务端通信报文的大小,并不是该资源本身的大小,该资源是从本地获取的。