我终于懂了(一) 浏览器缓存

前言

在经历看了忘,忘了看的痛苦后 终于下定决心写博客 给自己做总结
这些内容都是我看了多人的博客后,做的小小总结
主要是给自己复习用,加深记忆

1.浏览器为什么需要缓存?

良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度

白话文:
我已经加载过这个网页了 有些没变动的资源我再次发请求 没有意义
实属浪费流量 浪费时间 浪费人生

2.缓存放在哪里了？

内存和磁盘或者离线缓存和推送缓存(HTTP2.0)

①Service Worker Cache（离线缓存）

讲道理 我到现在 都不是很明白 这是啥? 恕我等级太低
等我有时间一定去搞懂它(其实也不愿意去看 狗头.jpg)
但是它还是有几个作用的

②Memory Cache （内存缓存）

效率快 存活时间短

③Disk Cache （磁盘缓存）

存储容量大 储存时间长 那么相对来说 效率就没内存缓存块了

④Push Cache (推送缓存)

这是HTTP 2.0中的内容 我还是不懂…

那么我就知道了 比较大的JS CSS文件就会丢到 磁盘缓存中
或者说内存不够的时候 也会丢到磁盘缓存中

3.缓存有哪些类型？

①强缓存 (不需要发送http请求)

HTTP 1.0时期 用的是 Expires字段判断 （过期时间）

Expires: Wed, 22 Nov 2019 08:41:00 GMT

这样会有个弊端 如果你计算机本地更改了时间 就会导致判断不正确

HTTP 1.1时期 用的是 Cache-control字段判断 (过期时长)
max-age: 过期时长

Cache-Control:max-age=3600 //意味着3600秒内 可以直接使用缓存

Cache-Control 还有这些字段

private： 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
no-store：非常粗暴，不进行任何形式的缓存。

②协商缓存(发HTTP请求 如无变动 返回304)

Last-Modified (时间)
如果浏览器收到服务器 资源中有这个字段
再给服务器发送时 会带上 If-Modified-Since这个字段
那么服务器收到时 就会进行比对

Etag （内容）
那么同理
浏览器 给服务器发送 会带上If-None-Match这个字段 存放资源
那么服务器 会进行比对

如果都有 那么会优先用 Etag 它也更精准一些 因为它是对内容进行对比
但性能上来说 Last-Modified 要更好一点 因为它就记录个时间点