浏览器的缓存机制和缓存策略

2023-10-02 00:29:17

浏览器缓存是现代网络应用不可或缺的一部分，它通过存储网页资源减少服务器请求次数，进而加速页面加载速度。缓存主要分为两种类型：强缓存（Strong Cache）和弱缓存（Weak Cache）。理解这两者的区别以及如何使用它们优化网站性能至关重要。

强缓存

强缓存基于HTTP头字段Expires或Cache-Control来决定是否需要向服务器发起请求。如果资源在强缓存期限内，浏览器将直接从本地加载资源而不会发送任何网络请求。

使用`Cache-Control`

Cache-Control是最常用的控制强缓存的方法之一。它通过指定指令如max-age来设定资源的过期时间（以秒为单位）。

HTTP/1.1 200 OK
Date: Tue, 15 Nov 2022 23:48:17 GMT
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在上述例子中，Cache-Control: max-age=604800表示缓存有效期为7天。期间内浏览器将直接使用本地存储的资源。

弱缓存

弱缓存也称为协商缓存（Validation Cache），主要通过ETag和Last-Modified字段来验证服务器上的资源是否发生变更。即使资源在强缓存期限外，浏览器也会首先尝试确认服务器端是否有最新版本资源。

使用`ETag`

ETag是实体标签，用于标识一个特定的资源版本。当资源发生变化时，其对应的ETag会改变，从而使得浏览器重新获取更新后的资源。

HTTP/1.1 200 OK
Date: Tue, 15 Nov 2022 23:48:17 GMT
Cache-Control: max-age=604800
ETag: "df9b40a3065cfe6a"
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

使用`Last-Modified`

类似地，Last-Modified记录了资源的最后修改时间。如果浏览器发现服务器上的资源未更新，则返回状态码304（Not Modified），告知浏览器继续使用本地缓存。

HTTP/1.1 200 OK
Date: Tue, 15 Nov 2022 23:48:17 GMT
Cache-Control: max-age=604800
Last-Modified: Mon, 14 Nov 2022 23:48:17 GMT
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>