前端缓存揭秘：5年前端技术的必备知识点-编程知识

背景

本篇文章将详细讲述何为前端缓存，这也是前端工程师必备的知识点。

首先，我们不能少了干这事的目的，前端缓存有什么用？

缓存作用：加快资源获取速度，提高用户体验感，缓解服务端压力

我们带着这个目的，好好地梳理一番~

大纲

每个人对于前端缓存的理解都不一，就如 一千个人有一千个哈姆雷特 一样

我参考其他文献与自己的见解，将前端缓存分门别类，罗列出来，仅供大家参考:

一、HTTP缓存

HTTP缓存，就是利用HTTP响应头将所请求的资源在浏览器中进行缓存

HTTP缓存，共为2种形式，强缓存 和 协商缓存，下面我们就详细了解一下。

这是HTTP缓存运作的一个整体流程图：

1.1 强缓存

强缓存又称（彻底缓存），指的是在缓存时间内不会向服务器发起请求，直接读取浏览器本地缓存，只有过期之后才会向服务器发起请求。

特性：

状态码：200
谁来决定：浏览器
缓存强度：F5刷新无效，Ctrl+F5刷新清空
存放位置：Disk Cache（磁盘缓存）、Memory Cache（内存缓存）
判断缓存：由Expires 、Cache-Control 、Pragma 这3个Header属性控制。

1.1.1 Expires

Expires是 HTTP/1.0 的产物。

ta的值是一个缓存的 过期时间（GMT），超过该时间，则重新请求。

且ta的 优先级 是这3个Header属性 最低 的。

缺点: 但Expires是根据本地时间来判断的，假设客户端和服务器时间不同，会导致缓存命中误差

为了解决以上问题（修改本地时间，重新请求），HTTP/1.1 则增加了 Cache-Control 字段

1.1.2 Cache-Control

Cache-Control是 HTTP/1.1 的产物。

且 优先级，高于Expires，整体 第二。

ta的值主要由 max-age 值来进行判断，常用的属性值：

max-age：单位（秒），从发起时间开始n秒后，缓存失效
no-cache：禁用强缓存，开启服务新鲜度判定
no-store：禁用缓存（包括协商缓存），每次请求最新
private/public：是否只能被单个用户保存

1.1.3 Pragma

Pragma也是 HTTP/1.0 的产物。

且ta的 优先级 是这3个Header属性 最高 的。

ta的值主要由 no-cache（实际上也是唯一取值）。

no-cache：禁用强缓存，开启服务新鲜度判定

主要作用：是保持 HTTP1.0 向后兼容，因为缓存技术是在HTTP1.1中才出现的。

1.2 协商缓存

协商缓存都会向 服务器 发送请求，由 服务器 来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信。

这主要涉及到下面两组header字段，这两组搭档都是 成对出现 的。

特性：

状态码：304
谁来决定：服务器
缓存强度：F5刷新和Ctrl+F5刷新都清空
判断缓存：由Last-Modified / If-Modified-Since、ETag / If-None-Match 这2个Header 成对属性 控制。

1.2.1 Last-Modified / If-Modified-Since

ta的值为 GMT时间（最后修改时间）。

第一次请求资源，服务器返回的header中会加上 Last-Modify，再次请求，request的请求头中会包含 If-Modify-Since，且该值为之前返回的 Last-Modify。

命中缓存判断:

服务器会通过收到 If-Modify-Since，判断最后修改时间，是否命中缓存。
若命中缓存，则返回 304 状态码，若没有，则不会返回 Last-Modify 字段

1.2.2 ETag / If-None-Match

ta的值为一串 hash 码，用来标识资源，当服务端的文件变化时，hash 码也会随之改变。

命中缓存判断：

通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存

二、浏览器缓存

浏览器缓存，简而言之就是，除了HTTP缓存的 其他浏览器缓存

里面包含了3种缓存，分别为 默认缓存 、本地缓存 、离线缓存（应用缓存）。

2.1 默认缓存

默认缓存，又被称为 Bf Cache 往返缓存。

作用：是为了页面前进后退，提升页面渲染的一种策略（默认行为）

当用户前往新页面时，将当前页面的浏览器DOM状态保存到 Bf Cache 中；当用户点击后退按钮的时候，将页面直接从 Bf Cache 中加载，节省了网络请求的时间。

2.2 本地缓存

本地缓存，实则是对于 本地数据 层面上的一种缓存策略。

例如我们经常使用的 WebStorage 和 Cookie，IndexDB 和 WebSql

2.2.1 WebStorage

大小跟浏览器相关，一般是 5MB
LocalStorage：
- 浏览器提供的 本地持久化存储，用于在浏览器中长期保存数据。
- 数据会一直保存在用户的浏览器中，除非 被显式清除。
- 数据 可跨页面，跨浏览器
SessionStorage：
- 浏览器提供的 会话级别的临时存储，用于在单个会话期间保存数据。
- 数据在会话结束后被清除，也就是 关闭页面清除。
- 数据 不可跨页面，跨浏览器