http缓存机制与原理(代码片段)

关键词：

缓存前言

Web缓存大致可以分为：数据库缓存、浏览器缓存、服务器缓存（CDN、代理服务器缓存）

而浏览器缓存也有很多方式，比如：HTTP缓存、localstrong、cookie等，下面将侧重于描述讨论一下HTTP缓存的相关话题。

缓存相对于浏览器来说，我理解的意思让第二次请求同样的数据加载的更快，页面显示更快，减小二次请求给服务器带来的带宽等压力。

浏览器与服务器之间通信是通过HTTP报文发送及响应数据

• 浏览器--------->服务器，发送请求(request)报文
• 服务器--------->浏览器，返回响应(response)报文

报文主要分为：

• 头部（header）：定义缓存的规则明细
• 主体（body）: HTTP请求输送的数据

缓存规则解析

两种方式：强制缓存 与 协商缓存

区别解析： 强制缓存如果命中缓存不需要与服务器发生交互，而协商缓存不管是否命中都要和服务器发生交互，而且强制缓存的优先级高于协商缓存

1.强制缓存

在强制缓存数据未失效的情况下，浏览器可以直接使用缓存的数据，那么浏览器是怎么判断强制缓存的数据失效了没有呢？



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

对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）

expires

Expires 指缓存过期的时间，超过了这个时间点就代表资源过期。

有一个问题是由于使用具体时间，如果时间表示出错或者没有转换到正确的时区都可能造成缓存生命周期出错。并且 Expires 是 HTTP/1.0 的标准，现在更倾向于用 HTTP/1.1 中定义的 Cache-Control。两个同时存在时也是 Cache-Control 的优先级更高。

Cache-Control

Cache-Control 主要有以下属性：

• max-age ：指定一个时间长度，在这个时间段内缓存是有效的，单位是s。
• private : 表明响应只能被单个用户（可能是操作系统用户、浏览器用户）缓存，是非共享的，不能被代理服务器缓存
• public ：表明响应可以被任何对象（发送请求的客户端、代理服务器等等）缓存
• no-store ： 禁止缓存，每次请求都要向服务器重新获取数据。
• no-cache : 需要使用协商缓存来验证缓存数据

2.协商缓存

需要进行比较判断是否可以使用缓存，浏览器和服务器端通过某种验证机制验证当前请求资源是否可以使用缓存。

浏览器第一次请求数据之后会将数据和响应头部的缓存标识存储起来。再次请求时会带上存储的头部字段，服务器端验证是否可用。如果返回 304 Not Modified，代表资源没有发生改变可以使用缓存的数据，获取新的过期时间。反之返回 200 就相当于重新请求了一遍资源并替换旧资源

Last-modified / If-Modified-Since

Last-modified: 服务器端资源的最后修改时间，响应头部会带上这个标识。第一次请求之后，浏览器记录这个时间，再次请求时，请求头部带上 If-Modified-Since 即为之前记录下的时间。服务器端收到带 If-Modified-Since 的请求后会去和资源的最后修改时间对比。若修改过就返回最新资源，状态码 200，若没有修改过则返回 304。

Etag/If-None-Match

优先级高于Last-Modified / If-Modified-Since

由服务器端上生成的一段 hash 字符串，第一次请求时响应头带上 ETag: abcd，之后的请求中带上 If-None-Match: abcd，服务器检查 ETag，返回 304 或 200。

关于 last-modified 和 Etag 区别：

• 某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新。
• Last-modified 只能精确到秒。
• 一些资源的最后修改时间改变了，但是内容没改变，使用 Last-modified 看不出内容没有改变。
• Etag 的精度比 Last-modified 高，属于强验证，要求资源字节级别的一致，优先级高。如果服务器端有提供 ETag 的话，必须先对 ETag 进行 Conditional Request。

应用场景；

可以考虑缓存的内容：不经常发生内容变动

• css样式文件
• js文件
• logo、图标
• html文件
• 可以下载的内容

不应该被缓存的：

数据经常发生变动，敏感的一些请求（GET）

结语：

这里参考线上的一些相关文章做了个总结，实际使用 HTTP 缓存需要后端配合配置，具体情况具体对待。

参考文章：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn#etag

http://www.alloyteam.com/2016/03/discussion-on-web-caching/#prettyPhoto

https://zhuanlan.zhihu.com/p/29750583

动画：深入浅出从根上理解http缓存机制及原理！(代码片段)

HTTP缓存，对于前端的性能优化方面来讲，是非常关键的，从缓存中读取数据和直接向服务器请求数据，完全就是一个在天上，一个在地下。我们最熟悉的是HTTP服务器响应返回状态码304，304代表表示告诉浏... 查看详情

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

...Web3、答疑解惑、面试辅导以及职业发展。。1.对浏览器的缓存机制的理解浏览器第一次加载资源，服务器返回200，浏览器从服务器下载资源文件，并缓存资源文件与responseheader，以供下次加载时对比使用；下一次加载资源时，由... 查看详情

nginx缓存机制和性能优化(代码片段)

目录Nginx缓存机制介绍Nginx缓存机制的作用nginx缓存机制简述 Nginx缓存支持 缓存使用proxy_cache_path参数详解 缓存清除机制分析被动缓存清除缓存加载主动清除缓存Nginx程序运行原理分析Nginx工作模式多进程处理模型多进程处理模... 查看详情

http缓存机制(代码片段)

参考网址：https://www.cnblogs.com/chenqf/p/6386163.htmlHTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，将其分为两大类(强制缓存，对比缓存)两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而对... 查看详情

http之缓存(代码片段)

...鲜HTTP有一些简单的机制可以在不要求服务器记住有哪些缓存拥有其文档副本的情况下，保持已缓存数据与服务器数据之间充分一致。HTTP将这些简单的机制称为文档过期（documentexpiration）和服务器再验证（serverrevalidation）。1.1文... 查看详情

一文读懂浏览器存储与缓存机制！(代码片段)

浏览器存储CookieCookie是HTTP协议的一种无状态协议。当请求服务器时，HTTP请求都需要携带Cookie，用来验证用户身份。Cookie由服务端生成，存储在客户端，用来维持状态。通常Cookie由以下值构成：名称（name&#x... 查看详情

web缓存机制(代码片段)

作为前端开发人员，对于我们的站点或应用的缓存机制我们能做的似乎不多，但这些却是与我们关注的性能息息相关的部分，站点没有做任何缓存机制，我们的页面可能会因为资源的下载和渲染变得很慢，但大家都知道去找前端... 查看详情

简述http协议报文首部缓存机制

http缓存原理与机制强制缓存机制(过期时间机制)：基本原理：在客户端第一次请求服务端时，服务端会将缓存规则信息添加在header中，客户端会通过这些信息判断是否能缓存。若是强制缓存，则header中会有两个字段来标记缓存失... 查看详情

缓存机制与局部性原理

http://www.cnblogs.com/jqctop1/p/4714116.html1.局部性原理 局部性原理是指计算机在执行某个程序时，倾向于使用最近使用的数据。局部性原理有两种表现形式：时间局部性和空间局部性。 时间局部性是指被引用过的存储器位置很... 查看详情

动画：深入浅出从根上理解http缓存机制及原理！(代码片段)

HTTP缓存，对于前端的性能优化方面来讲，是非常关键的，从缓存中读取数据和直接向服务器请求数据，完全就是一个在天上，一个在地下。我们最熟悉的是HTTP服务器响应返回状态码304，304代表表示告诉浏... 查看详情

学习笔记——mybatis中缓存机制(代码片段)

2023-01-12一、Mybatis中缓存机制1、一级缓存（1）概述：一级缓存（即本地缓存或SqlSession级别缓存）（2）特点：①一级缓存默认开启②不能关闭③可以清空（3）缓存原理①当第一次获取数据时，需要先从数据库中加载数据，将数... 查看详情

nginx缓存设置(代码片段)

浏览器缓存原理浏览器缓存HTTP协议定义的缓存机制（如：Expires；Cache-control等）2、浏览器无缓存3、客户端有缓存校验过期机制校验是否过期               Expires、Cache-Control... 查看详情

彻底弄懂http缓存机制及原理

前言Http缓存机制作为web性能优化的重要手段，对于从事Web开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览... 查看详情

http缓存机制(代码片段)

HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。在HTTP中具有缓存功能的是浏览器缓存或者说客户端缓存。1缓存的优点：减少了冗余的数据传递，节省宽带流量减少了服务器的负担，大大提高了网站性... 查看详情

mybatis缓存机制(代码片段)

缓存Cache一、简介1、缓存机制介绍2.一级缓存和二级缓存二、一级缓存三、二级缓存3.1mybatis自带的二级缓存3.1.1代码测试二级缓存3.1.2查询结果存入二级缓存的时机3.1.3二级缓存相关配置四、整合EHCache4.1EHCache简介4.2整合操作五、... 查看详情

《深入理解mybatis原理4》mybatis缓存机制的设计与实现

《深入理解mybatis原理》MyBatis缓存机制的设计与实现本文主要讲解MyBatis非常棒的缓存机制的设计原理，给读者们介绍一下MyBatis的缓存机制的轮廓，然后会分别针对缓存机制中的方方面面展开讨论。MyBatis将数据缓存设计成两级结... 查看详情

缓存策略及实践前端如何配置http缓存机制(代码片段)

缓存的目的主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。强缓存不需要发送请求到服务端，直接读取浏览器本地缓存，显示的HTTP状态码是200，强缓存又分为DiskCache(存放在硬盘中)和Memory... 查看详情

http学习彻底弄懂http缓存机制-基于缓存策略三要素分解法(代码片段)

前言Http缓存机制作为web性能优化的重要手段，对从事Web开发的小伙伴们来说是必须要掌握的知识，但最近我遇到了几个缓存头设置相关的题目，发现有好几道题答错了，有的甚至在知道了正确答案后依然不明白其原因，可谓相... 查看详情