前端浏览器缓存机制

Posted 2023-04-04

参考技术A

在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。

1： 为什么需要缓存？

a：缓存可以减少用户等待时间，提升用户体验

b：减少网络带宽消耗

c：降低服务器压力

Note：缓存使用不当，也会造成‘脏数据’问题

2：常见的缓存类型

强缓存 -

Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。

Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒

所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用

协商缓存-

Last-Modified：值为资源的最后更新时间，随服务器response返回

If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存

Etag：表示资源内容的唯一标识，即资源的消息摘要

If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改

3：缓存流程图示：

a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源

b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取

Note：

1.强缓存不会发生请求，协商缓存存在服务器请求

2.当协商缓存也未命中时，则服务器会将资源发送到客户端

3.F5刷新页面，会跳过强缓存

4.Ctrl+F5刷新页面，跳过强缓存和协商缓存

5.不会缓存的情况

HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0

6.小故事大道理

上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：

故事一：Last-Modified

浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。

服务器：（检查文件的修改时间）

服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。

浏览器：太好了，那我就显示给用户了。

故事二：ETag

浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的

服务器：（检查 ETag…）

服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了

浏览器：好，那就可以使用本地缓存了

前端技能树，面试复习第 38 天—— 浏览器原理：详解浏览器缓存机制 | 协商缓存与强缓存(重点)

⭐️ 本文首发自 前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、区块链、Web 3、答疑解惑、面试辅导以及职业发展。。

1. 对浏览器的缓存机制的理解

• 浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
• 下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持 HTTP1.1，则使用 expires 头判断是否过期；
• 如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modi