持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
缓存含义
当用户访问一个网站时，如掘金，会先从网站上将图片和数据加载出来，并缓存到本地，防止再次打开时，再去向服务器获取数据，提高用户使用的感受、优化网页打开速度。
缓存作用
- 降低带宽消耗
- 减少服务器请求
- 提高网站性能，优化客户体验
缓存位置
优先级：service worker > memory cache > disk cache > push cache
一般从控制台的size中可以看到文件所缓存的位置，如图：
service worker
离线缓存，一个页面只会被缓存一次，在首次加载时被缓存。只有被注册时才会被缓存，必须使用https请求，因为涉及到请求拦截，必须使用https保证文件传输安全
memory cache
内存缓存，一般存储页面中常用的资源，如脚本、图片、样式等等。读取速度被磁盘快，但是缓存时效短，当进程关闭时缓存失效
disk cache
硬盘缓存，容量大，啥都能存，覆盖面大，缓存资源占比较多，但是读取速度被内存缓存慢
prefetch cache
帧取缓存，在link中被标记为prefetch的资源，表示浏览器空闲再加载
push cache
推送缓存，是http/2知识，当以上三种缓存都未命中时，会被缓存到此，一般是会话（session）存储，时效很短，会话关闭时缓存失效
浏览器缓存
进行http请求时，会进行http数据缓存，比如网页的前进和后退，保存了用户之前访问过的数据
强缓存
在一段时间内，直接从缓存读取数据，不会向服务器发送请求，状态码为200
判断依据：当发送请求时，浏览器会先判断response header中是否有expires(http1.0) 或pragma或cache-control字段，如果存在，则为强缓存
协商缓存
强缓存过期之后就是协商缓存（缓存时间超过cache-control中max-age，或者no-cache）
- 协商缓存生效：状态码
304 - 协商缓存失效：状态码
200
通过以下两种方式实现
last-modified
最后一次修改时间，再次请求时，request header会携带if-last-modified（上一次服务器返回的last-modified），服务器将if-last-modified与last-modified相比较，相同则返回304，否则服务器返回200和新的资源文件
缺点：
- 即使没有修改过信息，服务器也会修改并返回last-modified，造成资源浪费
- last-modified是以秒计时，小于秒的修改，服务器感知不到，会返回304
etag
唯一标识符，服务器每次会返回一个etag，当资源文件修改时，会产生一个新的etag。再次请求时，request header会携带if-none-match（上一次请求返回的etag），两相比较，一致返回304，不一致则返回200和新的资源文件
两者区别
- last-modified效率高，etag的hash生成是需要根据文件内容计算的
- etag更精确
- etag优先级更高
实际使用场景
- 网页中基本不变的数据会被缓存，如css、js和图片等
- html结构不会被缓存
- 网页业务数据不会被缓存
