前端缓存一直是前端一热门话题，也是面试高频考点。主要涉及前端性能优化相关知识点。先来看看大纲：
之前也有写过一遍关于http缓存的文章一文读懂http缓存（超详细），里面写的比较详细。有兴趣可以去看看，今天呢，主要是对前端缓存做一个较为全面的总结，希望对大家有所帮助吧！
前端缓存大致分为两类：
1、http缓存
2、本地缓存
一、http缓存
http缓存也称为应用缓存，主要是缓存get请求时服务端返回的数据，缓存的前提是开启了缓存，缓存开启方式主要有两种：一种是服务端配置开启缓存，另一种是html通过meta标签设置http-equiv
http缓存分为两类：强缓存和协商缓存
强缓存是指无需向服务端发送请求即可从缓存中读取缓存数据，性能是最优的一种方式。
协商缓存是指需要向服务端发送请求校验该请求是否有过修改，如果服务端没有修改过那么就会返回304状态码，然后从前端缓存中读数据。如果服务端有修改即返回服务端数据。
http缓存请求流程：
强缓存相关请求响应头：
1、Pragma（http1.0）优先级最高
Pragma:no-cache: 服务端进行校验和Cache-Control:no-cache效果一致
2、Cache-Control（http1.1）优先级次高
请求头：
响应头：
no-store：不走缓存（优先级最高）
no-cache：走协商缓存
max-age=0：走协商缓存
3、Expires（http1.0）优先级最低
-1：表示立马过期
GMT时间：表示缓存失效的时间
协商缓存相关请求响应头：
1、ETag/If-None-Match（精度高、性能差，优先级高）
2、Last-Modified/If-Modified-Since（只能精确到秒）（只要打开了文件就默认做了修改，即使内容没有做任何改变）
响应头ETag和Last-Modified,其中ETag返回的是一个hash值，Last-Modified返回的是GMT格式的最后修改时间
请求头中带上与ETag对应的If-Not-Match，其值就是响应头中返回的ETag的值，Last-Modified对应的If-Modified-Since
http缓存存储方式：
1、from memory cache
从内存中获取/一般缓存更新频率较高的js、图片、字体等资源
2、from disk cache
从磁盘中获取/一般缓存更新频率较低的js、css等资源
如何查看http缓存：
1、chrome://version
查看个人资料路径：C:\Users{用户}\AppData\Local\Google\Chrome\User Data\Default
2、file:///C:/Users/{用户}/AppData/Local/Google/Chrome/User%20Data/Default/Cache/
查看到加密后的信息
3、下载工具：Chrome cache View
可查看到具体的缓存信息
二、本地缓存
本地缓存可分为：大容量缓存和小容量缓存
小容量存储：
1、Cookies（4kb、会与后台交互）
2、LocalStorage（H5新增特性、5M、永久存储）
3、SessionStorage（H5新增特性、5M、与浏览器标签共存亡）
大容量缓存：
1、IndexedDB（非关系型数据库、50M、正常使用）
2、WebSql（关系型数据库、50M左右、W3C标准废弃）
PWA（Progressive web apps，渐进式 Web 应用）：
1、可将应用添加至主屏幕
2、通过service worker实现离线缓存功能
3、可实现消息推送
service worker工作流程：
特点：
1、运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的HTTP请求
2、网站必须使用HTTPS。除了使用本地开发环境调试
如何查看缓存：
F12 + Application选项卡
默认缓存
默认缓存也称浏览器前进/后退缓存(Backward/Forward Cache, BF Cache)（浏览器默认开启的本地缓存）也有人叫disk Cache
BF Cache是一种浏览器优化，HTML标准并未指定其如何进行缓存，因此缓存行为是各浏览器各自实现，所以不尽相同。由于不是HTTP缓存，所以通过头文件缓存设置 no-cache 是无效的
BF Cache的逻辑是：用户点击前进/后退按钮的时候，就是期待回到“之前看到过的那个页面”，所以浏览器不需要从服务器获取一份新的代码并重新加载页面
如果需要禁用BF Cache可通过监听浏览器history事件，对页面进行reload可实现页面刷新