「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
前端缓存一般分为两部分
- HTTP缓存
- 浏览器缓存
HTTP缓存
当客户端发起服务器请求时，会先检索浏览器缓存，如果存在就会直接从浏览器中提取。
常见的HTTP缓存只能缓存get请求响应的资源。
在第一次请求时，服务器返回资源，在response header头中回传缓存参数。第二次请求时，浏览器就会判断是否命中。强缓存会直接200，否则吧参数加到request header头传给服务器，看是否命中协商缓存，命中返回304，否则返回新的资源。
根据是否重新发起请求可分为强缓存和协商缓存，根据可以被用户使用的数量分为私有缓存和共享缓存。
- 强缓存
强缓存在Cache-Control的max-age没有过期或者Expires的缓存时间没有过期的情况下，会直接使用浏览器的缓存，强制生效，状态码200。速度上最快，性能上更好。但是缺点是如果在这种情况下，服务器的资源被改动了则无法及时发现。开发过程中遇到这种情况就会出现，明明更改了样式，但是刷新无法实现。和强缓存有个的header属性有Pragma，Cache-Control，Expires。
- 协商缓存
当第一次请求的返回头里没有Cache-Control和Expires，或者过期，以及其设置为no-cache时，第二次请求就会和服务器协商，判断服务器资源是否更改，没更改返回304.通知浏览器，缓存可用。有更新返回200，重新缓存。
私有缓存则是只能单独用户使用，共享缓存则浏览器的所有用户都可用。
浏览器缓存可以加快浏览器的响应速度，减少服务器压力，减少了数据请求，减少流量。
HTTP缓存名词理解：
Cache-Control 值理解:
max-age 指定设置缓存最大的有效时间(单位为s) public 指定响应会被缓存，并且在多用户间共享 private 响应只作为私有的缓存，不能在用户间共享 no-cache 指定不缓存响应，表明资源不进行缓存 no-store 绝对禁止缓存
Expires 理解:
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点, 需要和Last-modified结合使用
Last-modified 理解
服务器端文件的最后修改时间，需要和cache-control共同使用，是检查服务器端资源是否更新的一种方式
ETag 理解
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已经修改
- 协商缓存(304)
协商缓存是指当强缓存机制如果检测到缓存失效，就需要进行服务器再验证。
浏览器缓存
- Cookie
- LocalStorage
- SessionStorage
- Service Worker
Cookie
Cookie主要用于用户信息的存储, 容量为4KB
LocalStorage
LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止, 容量为5MB
SessionStorage
SessionStorage的其他属性同LocalStorage, 不同是的当页面关闭时会随之清除
Service Worker
主要是为了提高web app的用户体验，可以实现离线应用消息推送等等一系列的功能, 可以看做是一个独立于浏览器的Javascript代理脚本, 在离线状态下也能提供基本的功能。 出于安全性的考虑，Service Worker 只能在https协议下使用分
