浏览器缓存 Last-Modified / Etag / Expires / Cache-Control 详解

2023-04-14 13:52:04 浏览数 (1)

什么是浏览器缓存

浏览器缓存,又称 HTTP 缓存,指的是:当我们浏览网站的时候,器存储会在本地存储一个副本,以便下次访问同个网址的时候可以不再连接服务器,直接使用本地的缓存。服务器端程序可以通过 HTTP Cache Headers 来控制缓存行为,减轻服务器的负担,缩短了响应时间,显著得提高网站的性能。

HTTP Cache Headers

当服务器发出响应的时候,可以通过两种方式来告诉客户端(浏览器)如何处理缓存:

第一种是 Expires,比如:

代码语言:javascript复制
Expires: Thu, 10 Dec 2015 23:21:37 GMT

在此日期之前,客户端都会认为缓存是有效的,第二次请求,浏览器不会连接服务器,直接从本地缓存中读取,比如下图:

不过 Expires 有缺点,比如说,服务端和客户端的时间设置可能不同,这就会使缓存的失效可能并不能精确的按服务器的预期进行。

第二种是 Cache-Control,比如:

代码语言:javascript复制
Cache-Control: max-age=3600

这里声明的是一个相对的秒数,表示从现在起,3600秒内缓存都是有效的,这样就避免了服务端和客户端时间不一致的问题。

但是 Cache-Control 是 HTTP1.1 才有的,不适用与 HTTP1.0,而 Expires 既适用于 HTTP1.0,也适用于 HTTP1.1,所以说在大多数情况下同时发送这两个头会是一个更好的选择,当客户端两种头都能解析的时候,会优先使用 Cache-Control。

条件请求

Last-Modified / If-Modified-Since

在浏览器第一次请求某一个 URL 时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个 Last-Modified 的属性标记此文件在服务期端最后被修改的时间,格式类似这样:

代码语言:javascript复制
Last-Modified: Mon, 30 Nov 2015 23:21:37 GMT

浏览器第二次请求此 URL 时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过:

代码语言:javascript复制
If-Modified-Since: Mon, 30 Nov 2015 23:21:37 GMT

如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

ETag / If-None-Match

HTTP 协议规格说明定义 ETag 为“被请求变量的实体值”。 服务器单独负责判断记号是什么及其含义,并在 HTTP 响应头中将其传送到客户端,以下是服务器端返回的格式:

代码语言:javascript复制
ETag: "d41d8cd98f00b204e9800998ecf8427e"

客户端的查询更新格式是这样的:

代码语言:javascript复制
If-None-Match: W/"d41d8cd98f00b204e9800998ecf8427e"

如果ETag没改变,则返回状态304,内容为空,这也和Last-Modified一样。

如何使用 Last-Modified 和 Etags 如何帮助提高性能?

开发者会把 Last-Modified 和 ETags 请求的 HTTP 报头一起使用,这样可利用客户端(例如浏览器)的缓存。因为服务器首先产生 Last-Modified/Etag 标记,服务器可在稍后使用它来判断页面是否已经被修改。本质上,客户端通过将该记号传回服务器要求服务器验证其缓存是否过期。

0 人点赞