F5刷新和Ctrl+F5刷新

前言

在项目中，经常会遇到明明刷新了页面 但是页面中的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 时该数字是与服务端通信报文的大小，并不是该资源本身的大小，该资源是从本地获取的。

而且Google和Firefox的处理是不一样的