http缓存机制及其原理

￡神魔★判官ぃ 2022-10-01 10:44 269阅读 0赞

> 大家不应该仅仅局限于知道浏览器会对请求的静态文件进行缓存, 但是为什么被缓存, 缓存是 怎么生效的, 也要清清楚楚

### 理解 http 缓存机制的必要性 ###

http 缓存机制作为Web性能优化的重要手段, 是计算机知识体系中的一个基础的环节, 同时也是前端架构师同学的必备技能

--------------------

### 缓存规则解析 ###

为方便大家理解，我们可以认为浏览器存在一个缓存数据库,用于存储缓存信息. 在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，将数据存储至缓存数据库中

根据是否需要重新向服务器发起请求来分类(强制缓存, 对比缓存)。 首先通过时序图的方式, 对他们有个简单的了解:

##### 已存在缓存数据 #####

仅基于强制缓存，请求数据的流程如下:

仅基于对比缓存，请求数据的流程如下:

可以看到，强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互

当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则

#### 强制缓存 ####

> 在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回， 缓存规则信息包含在响应header中

##### 浏览器是如何判断缓存数据是否失效呢 #####

强制缓存来机制中，响应header中会有两个字段来标明失效规则

*  Expires/Cache-Control

> Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。HTTP 1.1 的版本中，使用Cache-Control替代

#### 对比缓存 ####

顾名思义，需要进行比较判断是否可以使用缓存

> 通过两图的对比，我们可以很清楚的发现，在对比缓存生效时，状态码为304，并且报文大小和请求时间大大减少。 原因是，服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端

对比缓存标识一共分为两种标识传递:

*  Last-Modified / If-Modified-Since
 *  Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）

> Etag

服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）

> If-None-Match

再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识

> 服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对， 不同，说明资源又被改动过，则响应整片资源内容，返回状态码200； 相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache

### 总结 ###

--------------------

#### 缓存使用规则 ####

*  对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略
 *  对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存

#### 浏览器请求 ####

--------------------

> 参考文章: [彻底弄懂HTTP缓存机制及原理][HTTP]

转载于:https://juejin.im/post/5cc596fbf265da03b2043a11

[HTTP]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Fchenqf%2Fp%2F6386163.html

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关关于HTTP 缓存机制及原理介绍

![dc470ad4b12ea751ee58804dcbaf976d.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

￡神魔★判官ぃ/ 2024年03月30日 17:52/ 0 赞/ 105 阅读

相关 HTTP 缓存机制及原理浅谈

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] HTTP 缓存，对于前端的[性能优化][Link 2]方面来

叁歲伎倆/ 2024年03月30日 17:33/ 0 赞/ 139 阅读

相关关于HTTP 缓存机制与原理介绍

![6ee00585649c7b80ae0458e53fe7bd85.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

浅浅的花香味﹌/ 2024年03月27日 08:57/ 0 赞/ 107 阅读

相关 http缓存机制及原理浅述

HTTP 缓存，对于前端的[性能优化][Link 1]方面来讲，是非常关键的，从缓存中读取数据和直接向服务器请求数据，完全就是一个在天上，一个在地下。我们最熟悉的是 HTT

秒速五厘米/ 2024年03月26日 18:40/ 0 赞/ 137 阅读

相关 http缓存机制及其原理

> 大家不应该仅仅局限于知道浏览器会对请求的静态文件进行缓存, 但是为什么被缓存, 缓存是怎么生效的, 也要清清楚楚理解 http 缓存机制的必要性 http 缓存

￡神魔★判官ぃ/ 2022年10月01日 10:44/ 0 赞/ 270 阅读

相关深度剖析HTTP缓存机制及原理

前言 Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知

本是古典何须时尚/ 2022年05月27日 09:24/ 0 赞/ 270 阅读

相关彻底弄懂HTTP缓存机制及原理

前言 Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知

悠悠/ 2022年05月26日 00:44/ 0 赞/ 342 阅读

相关 HTTP缓存机制及原理（强制缓存/协商缓存）

可以参考文章：[https://www.imooc.com/article/267319\comment][https_www.imooc.com_article_267319

怼烎@/ 2022年02月23日 01:42/ 0 赞/ 365 阅读

相关《HTTP权威指南》--HTTP缓存机制及原理

本文整理自《HTTP权威指南》、《图解HTTP 》。写在前面自己想了解HTTP缓存时，看了许多相关文章，发现大多从强缓存和协商缓存分类介绍，仔细研究却发现文章描述总

向右看齐/ 2022年01月20日 04:37/ 0 赞/ 432 阅读

相关 HTTP缓存机制

转载：[https://www.cnblogs.com/ranyonsue/p/8918908.html][https_www.cnblogs.com_ranyonsue_p_

太过爱你忘了你带给我的痛/ 2022年01月07日 02:21/ 0 赞/ 343 阅读