http缓存机制及其原理

￡神魔★判官ぃ 2022-10-01 10:44 214阅读 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 条评论，214人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 http缓存机制及其原理

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

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

相关浏览器缓存机制——http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frame

ゞ浴缸里的玫瑰/ 2022年07月12日 12:23/ 0 赞/ 312 阅读

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

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

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

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

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

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

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

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

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

相关 HTTP缓存机制

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

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