浏览器缓存--浏览器三级缓存

最新推荐文章于 2024-10-05 22:14:12 发布

蓝莓味柯基

最新推荐文章于 2024-10-05 22:14:12 发布

阅读量980

点赞数 11

分类专栏：浏览器文章标签：缓存

本文链接：https://blog.csdn.net/weixin_45705239/article/details/137157027

版权

浏览器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是浏览器缓存

浏览器缓存就是将通过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

缺陷：Expires控制缓存原理是客户端的时间和服务端返回的时间作对比，若两个时间偏差大的话，会造成强制缓存直接失效
(2)Cache-Control
http1.1规范，替代Expires，它利用的是相对时间，利用header信息字段的max-age值判断。

max-age=5000//代表资源的有效期是5000秒

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）。如果资源没有改变，服务器将返回一个指示资源未修改的状态码，并且浏览器可以使用缓存中的副本，从而减少网络流量和加快页面加载速度。
在这里插入图片描述