让浏览器获取焦点失效_浏览器的缓存机制

最新推荐文章于 2024-04-15 16:28:45 发布

顾芸

最新推荐文章于 2024-04-15 16:28:45 发布

阅读量98

点赞数

文章标签：让浏览器获取焦点失效

原文链接：https://blog.csdn.net/wangzl1163/article/details/107860815

版权

想要加快浏览器加载网络资源的速度，有以下方法：

减少响应内容大小：如使用 HTTP/2 的压缩头部功能和 gzip 算法压缩响应体内容
使用「缓存」（把一些资源存储下来，从而无需再次加载）

使用缓存要尽可能地让浏览器从缓存中获取资源，并保证被使用的缓存与服务端最新的资源保持一致。一般只缓存静态资源（js、css、img）

Web 缓存按存储位置来区分，包括数据库缓存、服务端缓存、CDN 缓存和浏览器缓存。这里我们着重介绍一下浏览器缓存。

浏览器缓存的实现方式主要有两种：HTTP 和 ServiceWorker 。

HTTP 缓存

根据是否需要向服务器重新发起 HTTP 请求，将缓存过程分为两个部分：强制缓存和协商缓存：

一、强制缓存

强制缓存是在浏览器加载资源的时候，先直接从缓存中查找请求结果，如果不存在该缓存结果，则向服务端发起请求。

设置缓存时间的方法有两种（响应头字段）：

Expires（HTTP/1.0）
Cache-Control（HTTP/1.1）

Expires

HTTP/1.0 中使用响应头部字段 Expires 来设置缓存过期时间。客户端第一次请求时，服务端会在响应头部添加 Expires 字段。当浏览器再次发送请求时，先会对比当前时间和 Expires 对应的时间，如果当前时间早于 Expires 时间，那么直接使用缓存；反之，需要再次发送请求。

上述 Expires 信息告诉浏览器：在 2020.10.10 日之前，可以直接使用该请求的缓存。

问题：

服务端和浏览器的时间可能不同，导致缓存过期时间出现偏差
客户端可以通过修改系统时间来继续使用缓存或提前使缓存失效

为了解决这个问题，HTTP/1.1 提出了 Cache-Control 响应头部字段。

Cache-Control

它的常用值有下面几个：

no-cache：表示使用协商缓存，即每次使用缓存前必须向服务端确认缓存资源是否更新；
no-store：禁止浏览器以及所有中间缓存存储响应内容；
public：公有缓存，表示可以被代理服务器缓存，可以被多个用户共享；
private：私有缓存，不能被代理服务器缓存，不可以被多个用户共享；
max-age：以秒为单位的数值，表示缓存的有效时间；
must-revalidate：当缓存过期时，需要去服务端校验缓存的有效性。

此 Cache-Control 信息告诉浏览器该缓存为公有缓存，有效期 1 年。

强制缓存中，cache-control 的 max-age 优先级高于 Expires

二、协商缓存

协商缓存不指定缓存的有效时间，而是在请求时直接发送资源标识到服务端确认缓存是否需要更新，如果请求响应返回的 HTTP 状态为 304，则表示缓存仍然有效；否则返回状态码 200 、最新的资源和最新的资源标识。

控制缓存的难题就从浏览器端转移到了服务端。

资源标识（在 Response Header 中）有两种：

Last-Modified：资源的最后修改时间
Etag：资源的唯一标识（一个字符串）

Last-Modified 和 If-Modified-Since:

服务端通过响应头部字段 Last-Modified 和请求头部字段 If-Modified-Since 比对双方资源的修改时间，来确定缓存是否需要更新。具体工作流程如下：

浏览器第一次请求资源，服务端在返回资源的响应头中加入 Last-Modified 字段，表示这个资源在服务端上的最近修改时间；
当浏览器再次向服务端请求该资源时，请求头部带上之前服务端返回的 Last-Modified，这个请求头叫 If-Modified-Since；
服务端再次收到请求，根据 If-Modified-Since 的值，判断相关资源是否有变化，如果没有，则返回 304 Not Modified，浏览器使用资源缓存值；否则返回资源内容，且更新 Last-Modified 响应头内容。

这种方式虽然能判断缓存是否失效，但也存在两个问题：

精度问题：Last-Modified 的时间精度为秒，如果在 1 秒内发生修改，那么缓存判断会失效
准度问题：如果一个文件被修改后又被还原，内容没有发生变化，却仍然需要重新请求

ETag 和 If-None-Match

为了解决精度问题和准度问题，HTTP 提供了另一种依赖于文件哈希值的精确判断缓存的方式：响应头部字段 ETag 和请求头部字段 If-None-Match。具体工作流程如下：

浏览器第一次请求资源，服务端在返响应头中加入 Etag 字段，Etag 字段值为该资源的哈希值；
当浏览器再次跟服务端请求这个资源时，在请求头上加上 If-None-Match，值为之前响应头部字段 ETag 的值；
服务端再次收到请求，将请求头 If-None-Match 字段的值和响应资源的哈希值进行比对，如果两个值相同，则说明资源没有变化，返回 304 Not Modified；否则就正常返回资源内容，无论是否发生变化，都会将计算出的哈希值放入响应头部的 ETag 字段中。

这种缓存比较的方式也会存在一些问题，具体表现在以下两个方面：