强缓存、协商缓存(浏览器的缓存机制)是么子?

这篇具有很好参考价值的文章主要介绍了强缓存、协商缓存(浏览器的缓存机制)是么子?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.为什么要用强缓存和协商缓存?

为了减少资源请求次数,加快资源访问速度,浏览器会对资源文件如图片、css文件、js文件等进行缓存

二.什么是强缓存?

所谓强缓存,可以理解为强制缓存的意思,即浏览器在访问某个资源时会判断是否使用本地缓存里已经存在的资源文件,使用本地缓存的话则不会发送请求到服务器,从而达到减轻服务器访问压力的作用,且由于直接从本地缓存读取资源文件,大大提高了加载速度。
强缓存的具体流程为:
浏览器第一次请求远程服务器的某个资源时,如果服务器希望浏览器得到该资源后一段时间内不要再发送请求过来,直接从浏览器里的缓存里取,则服务器可以通过在响应头里设置Cache-Control: max-age=31536000,max-age代表缓存时间,单位为秒,这里的数据换算过来就是一年,意味着在一年内浏览器不会再向服务器发送请求。
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存使用缓存的话,状态码200后面会标明情况。浏览器缓存资源的地方有两个:磁盘缓存(disk cache)和内存缓存(memory cache)。
当缓存时间到期后再次访问时,状态码200后面便没有括号内的内容了。
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存
一般来说,浏览器会将较大的资源缓存到disk cache,而较小的资源则被缓存到memory cache里。内存缓存与磁盘缓存相比,访问速度要更快一些!
Cache-Control除了max-age外,还可以设置其它属性值:

  • no-cache: 不使用强缓存(但仍会使用协商缓存)。
  • no-store: 不使用缓存(不使用强缓存也不使用协商缓存),每次都向服务器发送资源请求。
  • private: 只允许客户端使用缓存,不允许其他代理服务器进行缓存。 public: 客户端和代理服务器都可缓存。
  • s-maxage: 与max-age类似,区别是s-maxage是设定代理服务器的缓存时间。

强缓存除了使用Cache-Control实现之外,还可以使用Expires字段,Expires是Http1.0规范,Cache-Control是Http1.1规范,Expires返回一个具体的时间值(如下图所示),代表缓存的有效期,在该日期内浏览器不会向服务器发起请求,而是直接从缓存里获取资源。
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存
因为Expires参照的是本地客户端的时间,而客户端的时间是可以被修改的,所以会有误差产生的情况,这也是Expires的一个缺点,所以有了后来Http1.1规范的Cache-control。
另外,Cache-control的优先级要高于Expires,如果两者同时设置,会优先使用Cache-control而忽略掉Expires。

三.什么是协商缓存?

在强缓存里,是否使用缓存是由浏览器来确定的,而协商缓存则是由服务器来告诉浏览器是否使用缓存资源,也就是浏览器每一次都要发送请求到服务器询问是否使用缓存,协商缓存的具体流程如下:
浏览器初次请求资源,服务器返回资源,同时生成一个Etag值携带在响应头里返回给浏览器,当浏览器再次请求资源时会在请求头里携带If-None-Match,值是之前服务器返回的Etag的值,服务器收到之后拿该值与资源文件最新的Etag值做对比。

  • 如果没有变化则返回304,告诉浏览器继续使用缓存(不返回资源文件)。
  • 如果发生变化,则返回200和最新的资源文件给浏览器使用。

强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存

除了Etag外,还有一个Last-Modified的属性,它是Http1.0规范的,服务器返回Last-Modified,浏览器请求头对应携带的是If-Modified-since,与Etag不同的是,Last-Modified的值是一个时间值,代表文件的修改时间,服务器通过对比文件的修改时间是否发生改变来判断是否使用缓存。
强缓存、协商缓存(浏览器的缓存机制)是么子?,缓存

相比Last-Modified,Etag优先级更高,使用上也更精确一些,因为有时候会存在文件内容并没有改变,但文件的修改时间变更了,Last-Modified不一致所以服务器会重新返回资源文件,实际上还是可以继续使用缓存的。

强缓存优先级大于协商缓存,即两者同时存在时,如果强缓存开启且在有效期内,则不会走协商缓存

四.总结

1. 强缓存就是浏览器本地根据服务器设置的过期时间来判断是否使用缓存,未过期则从本地缓存里拿资源,已过期则重新请求服务器获取最新资源。
2. 协商缓存则是浏览器本地每次都向服务器发起请求,由服务器来告诉浏览器是从缓存里拿资源还是返回最新资源给浏览器使用。文章来源地址https://www.toymoban.com/news/detail-809568.html

到了这里,关于强缓存、协商缓存(浏览器的缓存机制)是么子?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何清理电脑浏览器缓存,4款常用浏览器清理缓存的方法

    浏览器是人们在网络生活中不可缺少的存在,我们使用各种浏览器上网的时候,可能会出现各种程序出错的问题。或者,可能使用浏览器的时间就了,发现电脑有点卡顿,这时候就需要情况缓存了。那么,如何清理电脑浏览器的缓存呢?下面分享4款常用浏览器清理缓存的方法

    2024年02月04日
    浏览(52)
  • 浏览器缓存原理

    使用 HTTP 缓存的好处 :通过复用缓存资源,减少了客户端等待服务器响应的时间和网络流量,同时也能缓解服务器端的压力。可以显著的提升网站的应用性能。 HTTP 缓存策略分为两种 :强制缓存、协商缓存。 强制缓存 浏览器缓存没有过期的时候可以直接决定使用缓存。 强

    2023年04月27日
    浏览(28)
  • 前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

    掘金1:浏览器缓存 掘金2 :浏览器缓存 跟别人怎么讲,从大的说:缓存的原理是什么? 再说什么是浏览器缓存? 浏览器缓存 请求(静态资源 | 动态资源) 一、缓存是什么? 二、为什么? 浏览器是如何判断是否使用缓存的??第一次请求网页 第二次请求相同网页: 三、怎

    2024年02月12日
    浏览(40)
  • 浏览器渲染机制

    学习渡一课程、参考 必须明白的浏览器渲染机制 - 掘金 HTML解析 布局 分层 绘制 分块 光栅化 画 解析html会生成一个 dom树和cssom树   document.styleSheets  可以看到cssom树     渲染阻塞 在渲染的过程中,遇到一个script标记时,就会停止渲染,去请求脚本文件并执行脚本文件,因为

    2024年02月11日
    浏览(30)
  • 真的只是简单了解下浏览器缓存

    当我们打开一个页面时,会向服务端发起很多次请求,如下图打开百毒首页,发起了HTML、各种图片、JS、CSS等资源共72次请求。这里面很多资源并不会频繁变化,每次打开页面都重新请求下载,就很浪费了。 浏览器缓存也称为HTTP缓存,HTTP缓存 简单理解就是本地(浏览器)缓

    2023年04月25日
    浏览(27)
  • 记录--关于浏览器缓存策略这件事儿

    我们打开百度这个网站并刷新多次时时,注意到百度的logo是没有每次都加载一遍的。我们知道图片是img标签中的src属性加载出来的,这也需要浏览器去请求图片资源的,那么为什么刷新多次浏览器只请求了一次图片资源呢?这就涉及到了 浏览器的缓存策略 了,这张图片被浏

    2024年02月13日
    浏览(28)
  • 在?聊聊浏览器事件循环机制

    目录 前言  同步/异步编程模型 同步 异步 JS异步模型 调用栈 任务队列 宏任务队列 微任务队列 微任务API 事件循环 队列优先级 混合队列 事件循环实现 总结 参考文章 Event-Loop可视化工具 JS是单线程语言,在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多

    2024年02月10日
    浏览(55)
  • 对浏览器垃圾回收机制的理解

    1、垃圾回收的概念      javaScript代码运行的时候,需要分配内存空间来存储变量和值。变量不再参与的时候,就需要系统收回被占用的内存空间,这就是垃圾回收 🌈 回收机制:      ● js具有自动垃圾回收机制,会定期对那些不再使用的变量、对象占用的内存进行释放

    2024年02月14日
    浏览(30)
  • 浏览器刷新页面,缓存的处理方式,强制刷新

    刷新页面的缓存处理的方式对比 地址栏回车/直接访问 URL 保留强缓存,保留协商缓存,走正常请求流程 点击浏览器刷新按钮 忽略强缓存,保留协商缓存 按f5【command + r】 忽略强缓存,保留协商缓存 ctrl + f5 【command + shift + r 】 忽略强缓存,忽略协商缓存,从服务器端请求最

    2024年02月02日
    浏览(32)
  • 浏览器缓存引发的odoo前端报错

    前两天,跑了一个odoo16项目,莫名其妙的前端报错, moment.js 报的错, 这是一个时间库,不是我自己写的代码,我也没做过任何修改,搞不清楚为什么报错。以为是odoo的bug,所以从gitee下载了odoo16最新的代码,测试了一下还是报错。 后来换成了一个非常老的odoo16版本,这回不

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包