HTTP Caching
- 强缓存 Strong cache
- 协商缓存 Negotiation cache
HTTP协议中规定使用GMT时间,也就是格林威治标准时间,而我们国家使用的是GMT+8时区,所以在HTTP头信息中的时间会比我们的正常时间早8个小时,但它一点都不影响HTTP缓存的正常工作。
缓存获取顺序
按照缓存顺序来讲,当一个资源准备加载时,浏览器会根据其三级缓存原理进行判断。
- 浏览器会率先查找内存缓存,如果资源在内存中存在,那么直接从内存中加载
- 如果内存中没找到,接下去会去磁盘中查找,找到便从磁盘中获取
- 如果磁盘中也没有找到,那么就进行网络请求,并将请求后符合条件的资源存入内存和磁盘中
浏览器内存缓存生效的前提下,JS 资源的执行加载时间会影响其是否被内存缓存
图片资源(非 base64)也有和 JS 资源同样的现象,而 CSS 资源比较与众不同,其被磁盘缓存的概率远大于被内存缓存。
当使用 preload 预加载资源后,笔者发现该资源一直会从磁盘缓存中读取,JS、CSS 及图片资源都有同样的表现,这主要还是和资源的渲染时机有关,在渲染机制还没有介入前的资源加载不会被内存缓存。
prefetch 则表示预提取,告诉浏览器加载下一页面可能会用到的资源,浏览器会利用空闲状态进行下载并将资源存储到缓存中。
比如:访问图片-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
我们可以打开一个新的tab页面,打开 "Network",刷新一下,看到缓存的
.js
都是 "from memory"(.css
不会走 memory cache,都是 "from disk")。现在我们关闭当前tab(或关闭浏览器),重新再打开之前的 tab 时,缓存的
.js
都是 "from disk" 了。因为当
.js
等资源被加载时,浏览器会先将其放入memory cache
中,而当此页面tab被关闭时,浏览器会将此页面的memory cache
中的缓存文件转存到disk cache
中持久化存储。
https://nuxtjs-v316.vercel.app/