[转帖]浏览器缓存--浏览器三级缓存
当前位置:知识管理交流
→『 技术文档交流 』
![]() ![]() 浏览器缓存--浏览器三级缓存 浏览器缓存--浏览器三级缓存_浏览器缓存用来干什么的-CSDN博客 一、什么是浏览器缓存 浏览器缓存就是将通过HTTP请求获取的资源保存在本地的一种行为。浏览器对之前请求过的文件进行缓存,以便再次访问的时候提高页面展示的速度。 缓存的好处 1、缓解服务器压力,不用每次都去请求某些数据了。 2、提升前端性能,提高访问速度,打开本地资源肯定会比请求服务器来的快。 3、减少带宽消耗,当我们使用缓存时,只会产生很小的网络消耗。 (打开本地资源也会产生网络消耗) 二、缓存的位置 浏览器缓存的位置一般为四类:Server Worker、Memory Cache、Disk Cache、Push Cache 1、Server Worker Server Worker 是运行在浏览器的独立线程,一般用来缓存。Server Worker 涉及请求拦截,so传输协议是HTTPS来保障安全。 Server Worker 是“外建”的缓存机制,可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的,这是与其他内建缓存机制的区别。 2、Memory Cache–内存缓存 内存中的缓存,主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等,占据该进程一定的内存资源,但是缓存持续性很短,会随着进程的释放而释放。一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。 内存缓存特点:①读取速度快 ②时效性:页面关闭进程的内存清空释放 3、Disk Memory–磁盘缓存 硬盘中的缓存。在所有浏览器缓存中,Disk Cache 覆盖面基本是最大的,绝大部分的缓存都来自 Disk Cache。为什么呢?cuz根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。 硬盘缓存比内存缓存读取速度慢,读取需要对硬盘进行I/O操作,会导致重新解析缓存内容,造成读取路的复杂。 4、Push Cache 推送缓存,是HTTP/2的内容,并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候,它会被使用。在Session中存在,Session结束就会被释放,缓存时间短暂。 三、三级缓存原理 (访问缓存优先级) 1、先在内存中查找,如果有,直接加载。 2、如果内存中不存在,则在硬盘中查找,如果有直接加载。 3、如果硬盘中也没有,那么就进行网络请求。 4、请求获取的资源缓存到硬盘和内存。 四、浏览器缓存的分类 1、强缓存 浏览器在加载资源时,会先根据本地缓存资源的 header 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求并返回200。 在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control。 (1)Expires http1.0规范,它设置一个值绝对时间的GMT格式的时间字符串,这个是资源失效时间(客户端的时间小于Expires的值),在这个时间之前都是名中缓存。 Expires:Mon,16 Oct 2066 23:59:59 GMT 1 缺陷:Expires控制缓存原理是客户端的时间和服务端返回的时间作对比,若两个时间偏差大的话,会造成强制缓存直接失效 (2)Cache-Control http1.1规范,替代Expires,它利用的是相对时间,利用header信息字段的max-age值判断。 max-age=5000//代表资源的有效期是5000秒 1 2、协商缓存 当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header 中的部分信息来判断是否命中缓存。如果命中,则返回 304 ,告诉浏览器资源未更新,可使用本地的缓存。这里的 header 中的信息指的是 Last-Modify-------If-Modify-Since 和 ETag-------If-None-Match。 ①Last-Modified 浏览器向服务器发送资源最后的修改时间 ②If-Modified-Since 当资源过期时,发现响应头具有Last-Modified声明,则再次向服务器请求时带上头if-modified-since,表示请求时间。服务器收到请求后,发现有if-modified-since则与被请求资源的最后修改时间进行对比(Last-Modified),若最后修改时间较新,说明资源又被改过,则返回最新资源,返回200;若最后修改时间较小,说明资源无新修改,返回304 ,使用缓存文件。 ③ETag http1.1属性,由服务器生成返回给前端,帮助服务器控制web端的缓存验证,服务器会生成并且返回当前资源文件的一个唯一标识 ④If-None-Match 当资源过期时,发现响应头具有Etag声明,则再次向服务器请求时带上头if-none-match(唯一标识Etag值)。服务器收到该请求后,发现有If-None-Match则根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200。 缓存机制 强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。具体流程如下。 If-Modify-Since:实际上就是上次返回资源的时间戳 **If-None-Match:**用来判断请求头中的If-None-Match是否等于响应头中的 ETag,判断资源是否相同。 Cache-Control: Etag 浏览器中的 ETag(实体标签)是一种用于Web资源的HTTP响应标识符。它是由服务器分配的,并且在资源的内容发生变化时会更新。浏览器使用 ETag 来检查资源是否已经更改,以决定是否需要重新请求该资源或者直接使用缓存版本。 当浏览器请求一个资源时,服务器会在响应的头部包含 ETag 值。浏览器将该值存储在缓存中,然后在后续请求中将其发送给服务器。服务器使用收到的 ETag 来检查资源是否与客户端缓存的相同(请求头中的If-None-Match是否等于响应头中的 ETag)。如果资源没有改变,服务器将返回一个指示资源未修改的状态码,并且浏览器可以使用缓存中的副本,从而减少网络流量和加快页面加载速度。 总结 强缓存和协商缓存的区别 ①强缓存不发送请求到服务器,协商缓存发送请求到服务器 ②强缓存资源更新浏览器不知道,因为没有发送请求到服务器;协商缓存资源更新浏览器都知道,因为发送了请求到服务器 ③大部分web默认用协商缓存 刷新对强缓存和协商缓存的区别 ①当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存 ②当f5刷新网页时,跳过强缓存,检查协商缓存 ③浏览器地址栏中写入URL,不用请求直接走缓存,最快的速度 浏览器再次访问一个资源 ①看是否命中强缓存,命中使用强缓存 ②没有命中强缓存,发送请求到服务器看是否命中协商缓存 ③若命中协商缓存,服务器返回304告诉浏览器可以使用本地缓存 ④没有命中协商缓存,返回最新的资源,返回200 该文章在 2024/7/15 9:46:15 编辑过 |
关键字查询
相关文章
正在查询... |