背景

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

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

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

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

大纲

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

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

一、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：
- 浏览器提供的 会话级别的临时存储，用于在单个会话期间保存数据。
- 数据在会话结束后被清除，也就是 关闭页面清除。
- 数据 不可跨页面，跨浏览器

2.2.2 Cookie

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

2.2.3 IndexDB

浏览器提供的客户端数据库，用于在浏览器中存储大量结构化数据。它支持事务操作和索引，可以提供较高级的数据存储和查询功能，大小 无限。

2.2.4 WebSql

websql是较新的chrome浏览器支持，并以独立规范形式出现，引入了一组使用 SQL 操作客户端数据库的 APIs。

Web Sql数据库 API 不是HTML5的一部分，在H5之前就已经存在了。
将数据以数据库的形式存储在客户端，按需读取。
数据便于检索，允许使用sql语句。
可以使浏览器实现小型数据库存储功能。

2.3 离线缓存

离线缓存，又称为 应用缓存。

其作用：在离线（脱机）模式下，能请求到静态资源

我们一般说的离线缓存/应用缓存，其实主要是 Application Cache

2.3.1 Application Cache

Application Cache 为静态资源缓存，一种离线缓存技术，h5的新特性。

大部分的图片、js、css等资源放在mainfest文件配置中，页面打开时通过mainfest文件读取本地文件或请求服务器资源，通常用于静态页面的缓存。

2.3.2 PWA

基于App Manifest、Service Worker、Push Notification，实现的渐进式Web应用技术。

因此具备应用和页面二合一的特性：可跨平台、可安装、离线访问、推送通知、快速加载、可搜索、热更新等。

总结

前端缓存，是性能优化的一个大头，是区分一个优秀前端开发的重要指标。

世间万物万变不离宗，获取知识如缓存一般，与前端缓存的作用遥相对应。

加快技术层面的理解力，提升知识广度与深度，缓解无知/未掌控的压力

写博客，这或许是我缓解压力，以及提升技术的最佳合理摸鱼方式了。

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

背景

大纲