前端工程师都需要熟悉的技能 —— 前端缓存

什么是 web 缓存？

web 缓存主要指的是两部分：浏览器缓存和 http 缓存。

其中 http 缓存是 web 缓存的核心，是最难懂的一部分，也是最重要的那一部分。

浏览器缓存：比如 localStorage，sessionStorage，cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或是一些列表数据等等。

不过需要注意的是，像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则更少，大概只有4kb的数据。

http缓存

官方介绍：Web缓存是可以自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时，如果本地有“已缓存的”副本，就可以从本地存储设备而不是原始服务器中提取这个文档。

举个例子：

看图，问题就是出在，服务器需要处理 http 的请求，并且 http 去传输数据，需要带宽，带宽是要钱买的。而我们缓存，就是为了让服务器不去处理这个请求，客户端也可以拿到数据。

注意，我们的缓存主要是针对 html，css，img等静态资源，常规情况下，我们不会去缓存一些动态资源，因为缓存动态资源的话，数据的实时性就不会太好，所以我们一般都只会去缓存一些不太容易被改变的静态资源。

缓存可以解决什么问题？它的缺点是什么？

先说说，缓存可以解决什么问题。

• 减少不必要的网络传输，节约宽带（就是省钱）
• 更快的加载页面（就是加速）
• 减少服务器负载，避免服务器过载的情况出现（就是减载）

再说说缺点

• 占内存（有些缓存会被存到内存中）

其实日常的开发中，我们最关心的，还是“更快的加载页面”；尤其是对于 react/vue 等SPA（单页面）应用来说，首屏加载是老生常谈的问题。这个时候，缓存就显得非常重要。不需要往后端请求，直接在缓存中读取。速度上，会显著的提升。是一种提升网站性能与用户体验的有效策略。

http缓存又分为两种缓存，强制缓存和协商缓存，我们来深度刨析一下强制缓存和协商缓存各自的优劣以及他们的使用场景以及原理。

http缓存流程图：
 

 强制缓存

强制缓存，我们简称强缓存。

从强制缓存的角度出发，如果浏览器判断请求的目标资源有效命中强缓存，如果命令中，则可以直接从内存中读取目标资源，无需与服务器做任何通讯。

基于 Expires 字段实现的强缓存

在以前，我们通常会使用响应头的 Expires 字段去实现强缓存。如下图：

Expires 字段的作