从性能优化的角度看缓存

缓存的作用

重复利用已经获取的资源，减少延迟和网络阻塞，

缓存分类

• 数据库缓存

• 服务器缓存

  代理服务器缓存

  cdn缓存

• 浏览器缓存

  http缓存

  数据缓存

  应用离线缓存 PWA

浏览器缓存-强缓存和协商缓存

浏览器命中缓存原理

1. 浏览器在请求资源的时候，根据请求头部的expires 和cache-control判断是否命中强缓存，如果命中强缓存，就直接从浏览器获取缓存，而不会发送请求到服务器

2. 如果没有命中强缓存，就一定会发送请求到服务器，通过last-modified和Etag判断是否命中协商缓存，如果命中了协商缓存，服务器会返回这个请求，并返回状态码 304 not-modified，但是不会返回这个资源的数据，依然是从缓存获取数据

3. 如果既没有命中强缓存，也没有命中协商缓存，则从服务器获取资源并加载

强缓存

强缓存通过expires和cache-control两种请求头实现

1. expires，设置绝对时间，表示资源过期的时间

2. Cache-Control，设置指令短语 max-age，表示相对时间

如果当前的时间在给定的时间之内，就会使用本地的缓存，而不会向服务器再去请求

协商缓存

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串

实现协商缓存

last-modified和if-modified-since

浏览器上一次返回资源在返回头里返回last-modified首部字段，该首部字段表示该资源上次修改的时间，然后浏览器下次请求的时候会在请求头里设置if-modified-since，该首部字段设置为上次last-modified返回的值，

以这种方式询问服务器这个资源从这个时间之后是否有修改，如果有就会返回新的资源，如果没有则返回304 not-modified状态码

但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag

Etag和if-none-match

浏览器上一次返回资源在返回头里返回Etag这个首部字段，Etag表示文件指纹，然后浏览器下次请求的时候会在请求头里设置if-none-match，该首部字段设置为上次eTag的值

以这种方式询问服务器，请求的资源是否有更新，如果有就返回新的资源，如果没有则返回304 not-modified状态码