缓存含义
当用户访问一个网站时，如掘金，会先从网站上将图片和数据加载出来，并缓存到本地，防止再次打开时，再去向服务器获取数据，提高用户使用的感受、优化网页打开速度。
缓存作用
- 降低带宽消耗
- 减少服务器请求
- 提高网站性能，优化客户体验
缓存位置
优先级：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）存储，时效很短，会话关闭时缓存失效
cpu、硬盘、内存
跟很多人一样，我特别容易弄混硬盘和内存的概念，还要的话就是总是认为内存和硬盘是一个概念，其实不是
cpu、硬盘、内存都是计算机的重要组成部分
- cpu：中央处理单元，也叫处理器，协调和缓存各个部件的作用
- 硬盘：磁盘，存储文件和应用软件的作用，电脑断电关机都不会丢失数据
- 内存：负责硬盘等硬件上的数据与cpu之间数据交换处理。特点是体积小、速度快、有电可存、无电清空。也就是是，电脑在开机状态时内存中可存储数据，关机后将会自动清空所有数据
web缓存种类
浏览器缓存、cdn缓存、数据库缓存、代理服务器缓存
- cdn缓存：当发送一个web请求时，cdn会计算请求内容的最短路径，为了加快请求速度，一般会将此放进cdn里，比如https://unpkg.com/vue@3/dist/vue.global.js
- 数据库缓存：当数据表里面的数据过于庞大时，前端请求之后会将其缓存到本地内存，下次后端数据时，会先从缓存中查询，无缓存则向后端发送请求
- 代理服务器缓存：与浏览器缓存相似，但是代理服务器面向的客户端非常广泛，所以被多次调用的文件会被缓存，加快页面响应速度和减少带宽请求
- 浏览器缓存：进行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结构不会被缓存
- 网页业务数据不会被缓存