中高级前端工程师都需要熟悉的技能–前端缓存

1. 前言
2. 什么是 web 缓存？
3. http 缓存
4. 缓存可以解决什么问题？他的缺点是什么？
5. 强制缓存
• 基于 Expires 字段实现的强缓存
• 基于 Cache-control 实现的强缓存（代替 Expires 的强缓存实现方法）
• no-cache 和 no-store
• public 和 private
• max-age 和 s-maxage
6. 协商缓存
• 基于 last-modified 的协商缓存
• 基于 ETag 的协商缓存
• ETag 也有缺点：
7. 如何设置缓存？
8. 哪些文件对应哪些缓存？
9. 总结

前言

web 缓存是高级前端工程师必修技能，是我们变成大牛过程中绕不开的知识点。

文章会尽量用通俗易懂的言语来细说 web 缓存的概念和用处。

本期文章的大纲是

1. 什么是 web 缓存（前端缓存）？
2. 缓存可以解决什么问题？他的缺点是什么？
3. 强制缓存原理讲解
   • 3.1.基于 Expires 字段实现的强缓存
   • 3.2.基于 Cache-control 实现的强缓存
4. 协商缓存原理讲解
   • 4.1.基于last-modified实现的协商缓存
   • 4.2.基于ETag实现的协商缓存

什么是 web 缓存？

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

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

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

不过这里需要注意，像 localStorage，sessionStorage 这种用户缓存数据的功能，他只能保存 5M 左右的数据，多了不行。cookie 则更少，大概只能有 4kb 的数据。不要担心，这些概念对于未来会称为前端大牛的你来说都不是什么问题，非常的简单。因为太简单，数据缓存不再这篇文章的介绍中，这里一笔带过，

这篇文章重点讲解的是：前端 http 缓存。

http 缓存

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

举个栗子：

因为一般情况下，index.html 是不会设置哈希值的。（具体得看自己项目下的 dist 文件夹）

注意：哈希值是需要 webpack 生成的。不是天生的。不过有些框架会自带（比如我使用的 umi.js）,设置缓存前务必看下自己的 dist 文件。因为如果没有配置的话，你可能所有文件都不带哈希值。

总结

• http 缓存可以减少宽带流量，加快响应速度。
• 关于强缓存，Cache-control是Expires的完全替代方案，在可以使用Cache-control的情况下不要使用Expires
• 关于协商缓存,ETag并不是last-modified的完全替代方案，而是补充方案，具体用哪一个，取决于业务场景。
• 有些缓存是从磁盘读取，有些缓存是从内存读取，有什么区别？答：从内存读取的缓存更快。
• 所有带 304 的资源都是协商缓存，所有标注（从内存中读取/从磁盘中读取）的资源都是强缓存。

作者：工边页字

原文链接：点击这里