前端缓存主要是分为HTTP缓存和浏览器缓存。

第一次发起HTTP请求

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么没有必要再将数据回传回来，这样就减少了响应数据。

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

浏览器缓存

缓存位置

Service Worker

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS 。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

Memory Cache

内存中的缓存，主要包含当前页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

Disk Cache

存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

Push Cache

推送缓存是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在 Chrome 浏览器中只有 5 分钟左右，同时它也并非严格执行 HTTP 头中的缓存指令。

用户行为对浏览器缓存的影响：

• 打开网页，地址栏输入地址：查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。
• 普通刷新（F5）：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用（如果匹配的话）。其次才是 disk cache。
• 强制刷新（Ctrl + F5）：浏览器不使用缓存，因此发送的请求头部均带有 Cache-Control: no-cache（为了兼容，还带了Pragma: no-cache），服务器直接返回 200 和最新内容。

本地存储小容量

Cookie

Cookie 主要用于用户信息的存储，Cookie 的内容可以自动在请求的时候被传递给服务器。

LocalStorage

LocalStorage 的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。

localStorage 的 api 使用

//Save a value to localStorage
localStorage.setItem('key', 'value to save');
//OR
localStorage.key = 'string value to save';
//Get the value back out of localStorage
localStorage.getItem('key');
//OR
localStorage.key;
//Clear all localStorage values
localStorage.clear();

SessionStorage

SessionStorage 的其他属性同 LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。

当浏览器提供“恢复会话”功能时，通常旨在帮助用户从浏览器/计算机崩溃中快速恢复，SessionStorage 中的值也将被恢复。因此，虽然它是服务器上的一个新“会话”，但从浏览器的角度来看，它是浏览器重启后单个会话的延续。
这使得 SessionStorage 成为一种理想的存储技术，用于临时“备份”用户表单值、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复（如果存在），以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复（尽管浏览器会自行执行其中的一些操作，尤其是在从崩溃中恢复时）。

当您在私人/隐身/安全模式（有时更粗略和准确地称为“「se情模式」”）下启动浏览器时，它将为 LocalStorage 值创建一个新的临时数据库。这意味着当隐私浏览会话关闭时，保存到 LocalStorage 的任何内容都将被销毁，从而使 LocalStorage 的行为更像 SessionStorage。 此外，由于浏览器的“会话恢复”功能不会重新打开私有模式会话，因此在浏览器窗口关闭后，在 SessionStorage 中创建的任何内容也将丢失。实际上，简而言之，在隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都会在浏览器窗口关闭（有意或无意）后立即丢失。

本地存储大容量

WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。

往返缓存

往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。

缓存能带来哪些好处

缓存的合理利用是前端的性能优化的原则之一，也是衡量部署策略合理性的要素之一。
一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

参考链接：

• 彻底吃透浏览器的缓存机制！