谈谈我理解的Http缓存机制

前几天看到老铁们分享的面经,谈到 http 缓存机制的问题,痛下决心,一口气研究个明白,分享给大家。

前端的发展越来越迅速,能做的事情越来越多,承担的责任越来越重,通过了解 http 缓存机制,可以帮助广大前端开发工作者提高网站的访问效率,也能有效减轻服务器的压力。

http 缓存规则

http缓存机制有两种缓存规则:强缓存 和 对比缓存(也有称为协商缓存), 这个规则是由服务器响应携带的。

第一次请求

无论强缓存还是对比缓存,浏览器第一次请求服务器时候,都先要到缓存数据库去请求是否有缓存数据,返回结果当然是没有缓存数据了~ 然后再去请求服务器,服务器的响应数据会携带缓存规则,告诉客户端是强缓存还是对比缓存。如下图所示:

可是强缓存和对比缓存到底是什么?如何判断是强缓存还是对比缓存?

强缓存

强缓存:在一个有效期时间内,请求缓存数据库中的数据。

服务器会通过 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0)  告知浏览器请求数据的有效时间,在这个时间内,浏览器再次请求这个数据的时候就不用请求服务器,而是请求缓存数据库里的数据就好了。如图:

这样的好处:

1. 减轻了服务器的压力。一个网站会有大量的用户,海量的请求,服务器要对其处理和响应,这是一个巨大的负担。

2. 浏览器得到数据更快。不用等服务器返回 200 ,直接 304 到缓存数据库中拿数据就好了, 节省了网络传送延迟等时间。

那么 cache-control: max-age:xxx (HTTP 1.1) 或者 Expire (HTTP 1.0) 有什么区别呢?

cache-control: max-age:xxx 是  HTTP 1.1 的内容, Expire 是 HTTP 1.0 的内容, Expire 是服务器产生的到期时限,如果本地的时间存在误差,那么会造成影响,所以 HTTP 1.1 推出 cache-control 属性。cache-control: max-age:xxx 意为 缓存的内容将在 xxx 秒后失效。

  注意:

  cache-control 的优先级比 Expire 高。

强缓存当然也存在问题,在这个期限时间内都用缓存数据了,那我服务器更新数据怎么办?下面介绍一下对比缓存。

对比缓存

对比缓存需要进行比较判断是否可以使用缓存。通过 cache-control:no-cache 使用对比缓存来验证缓存数据。

第一次请求数据的时候,服务器会将缓存标识与数据一起返回给客户端,客户端将二者备份至缓存数据库中。再次请求数据时,客户端将备份的缓存标识发送给服务器,服务器根据缓存标识进行判断,判断成功后,返回304状态码,通知客户端比较成功,可以使用缓存数据。

对比缓存判断是否命中通过两对属性:

1. Last-Modified  /  If-Modified-Since

Last-Modified 由服务器产生,指数据的最后修改时间,服务器将 Last-Modified 返回给客户端,下一次浏览器再次请求会携带这个最后修改时间,放在  If-Modified-Since 里,服务器拿到  If-Modified-Since 后,对比数据的最后修改时间:

比对成功,代表数据未修改过,返回状态码 304, 重定向到缓存数据库。

对比失败,代表数据距离上一次被请求时, 做过修改,就要重新响应数据, 返回 200。

2. Etag  /  If-None-Match

Etag  是由服务器产生的一个唯一标识,服务器将 Etag  返回给客户端,下一次浏览器再次请求会携带这个标识,放在   If-None-Match 里,服务器拿到  If-None-Match 后,对比自己的数据标识:

比对成功,代表数据未修改过,返回状态码 304, 重定向到缓存数据库。

对比失败,代表数据距离上一次被请求时, 做过修改,就要重新响应数据, 返回 200。

  注意:

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

总结:

随着前端技术的进步,前端能够做的事情越来越多,了解 http 内容好处良多,至少跟后台开发推锅不至于被牵着鼻子走,哈哈~~~

  纯属个人见解,如有异议,欢迎提出,转载请指明出处,素质分享。

时间: 2024-12-16 11:20:02

谈谈我理解的Http缓存机制的相关文章

彻底理解浏览器的缓存机制(http缓存机制)

一.概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 同步sau交流学习社区(首发):https://www.mwcxs.top/page/565.html 1.HTTP请求(Request)报文,报文格式为:请求行 – HTTP头(通用信息头,请求头,实体头) – 请求报文主体(只有POST才有报文主体),如下图 HTTP响应(Response)报文,报文

项目总结——谈谈封装(抽象工厂+反射+缓存机制)

今天想给大家说的也是刚刚结束的项目中遇到的一个优秀的封装,当然也要拿出来给大家分享了. 背景交代,我们的项目是一个BS的项目,基本的架构是工厂模式三层,所以就用到了抽象工厂加反射,今天要给大家讲的也就是这块的东西——使用缓存文件. 背景交代完毕. 一.首先说一下什么是缓存文件? msdn上说: 通常,应用程序可以将那些频繁访问的数据,以及那些需要大量处理时间来创建的数据存储在内存中,从而提高性能.例如,如果应用程序使用复杂的逻辑来处理大量数据,然后再将数据作为用户频繁访问的报表返回,避免在用户每

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

本文主要讲解MyBatis非常棒的缓存机制的设计原理,给读者们介绍一下MyBatis的缓存机制的轮廓,然后会分别针对缓存机制中的方方面面展开讨论. MyBatis将数据缓存设计成两级结构,分为一级缓存.二级缓存: 一级缓存是Session会话级别的缓存,位于表示一次数据库会话的SqlSession对象之中,又被称之为本地缓存.一级缓存是MyBatis内部实现的一个特性,用户不能配置,默认情况下自动支持的缓存,用户没有定制它的权利(不过这也不是绝对的,可以通过开发插件对它进行修改): 二级缓存是A

深入理解http(二)------http的缓存机制及原理

一.概念基础 参考原文:https://blog.csdn.net/hiredme/article/details/73468040 http的缓存,主要存在于本地浏览器和web代理服务器中. 在这里,我们讲的是浏览器缓存. 1. 响应头ETag(Entity Tag) Etag用来表示一个资源.在服务器返回响应时包含这个值,不同的资源response返回不一样的Etag.在下次请求相同的资源时,浏览器会在 if-None-Match中带着Etag的传给服务器,如果服务器发现Etag和上次相同,

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

<深入理解mybatis原理> MyBatis缓存机制的设计与实现 本文主要讲解MyBatis非常棒的缓存机制的设计原理,给读者们介绍一下MyBatis的缓存机制的轮廓,然后会分别针对缓存机制中的方方面面展开讨论. MyBatis将数据缓存设计成两级结构,分为一级缓存.二级缓存:   一级缓存是Session会话级别的缓存,位于表示一次数据库会话的SqlSession对象之中,又被称之为本地缓存.一级缓存是MyBatis内部实现的一个特性,用户不能配置,默认情况下自动支持的缓存,用户没有定制它

浏览器缓存机制深入理解与实践(一)

我们在web开发中常常会遇到这样的场景,有一些较大和常用的资源(例如图片.文档.js.css),在页面打开初始化的时候并不需要用到,而是在用户与页面互动操作触发了某些条件时才需要这些资源(例如我们打开微博可能并不是为了看热搜,但大多数时候我们会点进热搜查看热搜新闻). 那么问题来了,如果用户去点击查看热搜时,我们才去加载热搜所需要的相应的资源数据,就显得很被动了.因为在最常用的功能中,来耗费时间等待,这对用户来说其实并不是一个非常好的体验.所以,我们首先想到的是提前将这部分资源加载到浏览器缓存中

Varnish缓存机制详细介绍及简单配置

Varnish是一款高性能的开源HTTP加速器,其主要用来做为反向代理中的缓存服务器使用,但其实Varnish本身也是具有反向代理功能的,但在创建连接和维持连接上,与Nginx相比差距很大,现在有一个很流行的架构就是前端用Nginx作为反向代理,后面加Varnish缓存服务器为Web服务加速 在将Varnish前先谈谈我们的浏览器缓存机制,现在的浏览器基本都具有缓存功能,它能将我们以前访问过的静态内容和可进行缓存的动态内容缓存再本地,而后在下次访问相同资源时,如果可以确认Server端的资源未发

【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李志刚 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必须要掌握的知识,但最近我遇到了几个缓存头设置相关的题目,发现有好几道题答错了,有的甚至在知道了正确答案后依然不明白其原因,可谓相当的郁闷呢!!为了确认下是否只是自己理解不深,我特意请教了其他几位小伙

hibernate缓存机制详细分析 复制代码

您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内容有任何疑问, 可以通过评论或发邮件的方式联系我: [email protected] / [email protected] 如果需要转载,请注明出处,谢谢!! 在本篇随笔里将会分析一下hibernate的缓存机制,包括一级缓存(session级别).二级缓存(sessionFactory级别)以