Web缓存速查

April 4, 2024March 14, 2025

规范或参考

浏览器默认行为
https://web.dev/articles/http-cache
https://html.spec.whatwg.org/multipage/browsing-the-web.html

备注：
如非手动 fetch，浏览器可能自动添加 If-None-Match 和 If-Modified-Since 标头
但此行为目前尚未在 HTML 标准中规范

fetch 标准
https://fetch.spec.whatwg.org/#http-network-or-cache-fetch
https://fetch.spec.whatwg.org/#concept-request-cache-mode

条件请求与缓存
https://www.rfc-editor.org/rfc/rfc9110.html#name-conditional-requests
https://www.rfc-editor.org/rfc/rfc9111.html

参考
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching
https://zh.wikipedia.org/wiki/Web%E7%BC%93%E5%AD%98

标头

类型	消息报头	值/示例	作用
响应	Cache-Control	`max-age=<seconds>`	指明缓存副本的有效时长，从请求时间开始到过期时间之间的秒数
响应		`must-revalidate`	一旦响应过时，缓存必须向源服务器验证响应的有效性后才能使用
响应		`must-understand`	限制可缓存该响应的缓存为理解并符合该响应状态码要求的缓存。包含 `must-understand` 指令的响应应该也包含 `no-store` 指令
响应		`no-cache`	缓存必须先向源服务器验证后才能使用响应
响应		`no-store`	缓存不得存储任何关于请求或响应的部分，且不得使用此响应去满足其他请求
响应		`no-transform`	中介（无论其是否实现缓存）不得转换内容
响应		`private`	共享缓存不得存储响应（即，响应仅供单个用户使用）。私有缓存可以存储响应
响应		`proxy-revalidate`	类似于 `must-revalidate`，但不适用于私有缓存。共享缓存一旦响应过时，必须向源服务器验证响应的有效性后才能使用
响应		`public`	即使存在其他禁止缓存的限制，缓存也可以存储响应
响应		`s-maxage=<seconds>`	对于共享缓存，此指令指定的最大生存期将覆盖 `max-age` 指令或 `Expires` 头字段指定的最大生存期。并包含 proxy-revalidate 语义
响应		`stale-while-revalidate=<seconds>`	在指定的秒数内可使用过时的缓存，同时缓存在后台应尝试重新验证它
响应		`stale-if-error=<seconds>`	如果在尝试重新验证时遇到错误，允许缓存在指定的秒数内使用过期的响应
请求	Cache-Control	immutable	表示响应正文不会随时间而改变, 这是响应中的指令，不是请求指令
请求		`max-age=<seconds>`	客户端希望获取一个 age 小于或等于指定秒数的响应。如果没有 `max-stale`，客户端不希望收到过期的响应
请求		`max-stale[=<seconds>]`	客户端愿意接受已经过期的响应。可选的秒数表示客户端愿意接受的响应超过其新鲜生存期的最大秒数。如果不指定秒数，则客户端愿意接受任何年龄的过期响应。
请求		`min-fresh=<seconds>`	客户端希望获取一个在未来指定秒数内仍然保持新鲜的响应
请求		`no-cache`	客户端要求缓存必须在使用存储的响应之前，先与源服务器进行成功验证
请求		`no-store`	客户端要求缓存不得存储此请求或任何响应的任何部分
请求		`no-transform`	客户端要求中间件不要转换响应的内容（例如，不要压缩或更改内容编码）
请求		`only-if-cached`	客户端只希望获取已存储的响应。如果缓存没有可用的响应，它应返回一个 504 (Gateway Timeout) 状态码
响应	Expires	`Sun, 16 Oct 2016 05:43:02 GMT`	告知浏览器在过期时间前可以使用副本 (存在时间不一致问题)
响应	Pragma	`no-cache`	告知浏览器忽略资源的缓存副本（兼容 HTTP1.0，HTTP1.1 使用 Cache-Control 代替）
响应	Last-Modified	`Sun, 16 Oct 2016 05:43:02 GMT`	告知浏览器当前资源的最后修改时间
请求	If-Modified-Since	`Sun, 16 Oct 2016 05:43:02 GMT`	如果浏览器第一次请求时响应中 Last-Modified 非空，第二次请求同一资源时，会把它作为该项的值发给服务器
响应	ETag	`"33a64df551425fcc55e4d42a148795d9f25f89d4"` `W/"0815"`	告知浏览器当前资源在服务器的唯一标识符（生成规则有服务器决定）
请求	If-None-Match	`"bfc13a64729c4290ef5b2c2730249c88ca92d82d"` `W/"67ab43", "54ed21", "7892dd"`	如果浏览器第一次请求时响应中 Etag 非空，第二次请求同一资源时，会把它作为该项的值发给服务器
响应	Vary	`Accept-Encoding`	辅助从多个缓存副本中筛选合适的版本（不同压缩算法产生的副本）
响应	Age	`24`	表示对象在代理缓存中停留的时间，以秒为单位
响应	Clear-Site-Data	`"cache", "cookies", "storage", "executionContexts"` `"*"`	清除当前请求网站有关的浏览器数据

UTCString Mon, 03 Jul 2006 21:44:38 GMT（RFC 1123）

ISOString 1970-01-01T00:00:00.000Z（ISO 8601）

缓存流程

用户操作

此行为目前尚未在 HTML 标准中规范，仅供参考

用户操作	Expires/Cache-Control	Last-Modified/Etag
地址栏回车	有效	有效
页面链接跳转	有效	有效
新开窗口	有效	有效
前进后退	有效	有效
F5刷新（刷新按钮）	无效	有效
Ctrl+F5强制刷新	无效	无效

刷新请求也会被当前激活的 ServiceWorker 捕获；强制刷新或重新打开标签页则不会

预请求/加载

memory cache disk cache service worker cache push cache
https://web.dev/learn/performance/resource-hints
https://web.dev/learn/performance/prefetching-prerendering-precaching
https://developer.mozilla.org/zh-CN/docs/Glossary/Prefetch
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Guides/Speculative_loading
https://developer.chrome.google.cn/docs/web-platform/prerender-pages

预解析 DNS

html

<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />

预先与源建立连接

crossorigin 属性必须对跨源请求设置，否则不会重复利用连接。

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

或使用Link响应头或103状态码

Link: <https://example.com>; rel="preconnect"

预请求当前网页所需资源

html

<!-- prettier-ignore -->
<link rel="preload" href="/lcp-image.jpg" as="image" />
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="bg-narrow.png" as="image" media="(max-width: 600px)" />
<link rel="preload" href="bg-wide.png" as="image" media="(min-width: 601px)" />
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/data.json" as="fetch" crossorigin />

模块预加载

html

<link rel="modulepreload" href="script.mjs" />

预请求未来导航的资源（文档预取）

注：<link rel="prerender"> 已弃用

html

<link rel="prefetch" href="/next-page.css" as="style" />

或使用推测规则 API

html

<script type="speculationrules">
    {
        "prerender": [
            {
                "where": {
                    "and": [
                        { "href_matches": "/*" },
                        { "not": { "href_matches": "/logout" } },
                        { "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
                        { "not": { "selector_matches": ".no-prerender" } },
                        { "not": { "selector_matches": "[rel~=nofollow]" } }
                    ]
                }
            }
        ],
        "prefetch": [
            {
                "urls": ["next.html", "next2.html"],
                "requires": ["anonymous-client-ip-when-cross-origin"],
                "referrer_policy": "no-referrer"
            }
        ]
    }
</script>

HTTP/2 服务器推送

import http2 from "node:http2";
import fs from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";

const { HTTP2_HEADER_PATH, HTTP2_HEADER_METHOD, HTTP2_HEADER_STATUS, HTTP_STATUS_OK, HTTP_STATUS_NOT_FOUND } =
    http2.constants;

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const server = http2.createSecureServer({
    key: fs.readFile(path.join(__dirname, "server.key")),
    cert: fs.readFile(path.join(__dirname, "server.crt")),
});

server.on(
    "stream",
    async (
        /** https://docs.deno.com/api/node/http2/~/ServerHttp2Stream */
        stream,
        headers,
    ) => {
        const reqPath = headers[HTTP2_HEADER_PATH];
        const reqMethod = headers[HTTP2_HEADER_METHOD];

        const [html, css, js] = await Promise.all([
            fs.readFile(path.join(__dirname, "index.html")),
            fs.readFile(path.join(__dirname, "style.css")),
            fs.readFile(path.join(__dirname, "script.js")),
        ]);

        if (reqMethod === "GET" && reqPath === "/") {
            if (stream.pushAllowed) {
                // 推送 style.css
                stream.pushStream({ [HTTP2_HEADER_PATH]: "/style.css" }, (err, pushStream) => {
                    pushStream.respond({
                        [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,
                        "content-type": "text/css",
                    });
                    pushStream.end(css);
                });

                // 推送 script.js
                stream.pushStream({ [HTTP2_HEADER_PATH]: "/script.js" }, (err, pushStream) => {
                    pushStream.respond({
                        [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,
                        "content-type": "application/javascript",
                    });
                    pushStream.end(js);
                });
            }

            // 响应 index.html
            stream.respond({
                [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,
                "content-type": "text/html",
            });
            stream.end(html);
        } else {
            switch (reqPath) {
                // 响应直接请求
                case "/style.css":
                    stream.respond({
                        [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,
                        "content-type": "text/css",
                    });
                    stream.end(css);
                    break;
                case "/script.js":
                    stream.respond({
                        [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,
                        "content-type": "application/javascript",
                    });
                    stream.end(js);
                    break;
                // 404
                default:
                    stream.respond({ [HTTP2_HEADER_STATUS]: HTTP_STATUS_NOT_FOUND });
                    stream.end();
                    break;
            }
        }
    },
);

server.listen(8443, () => {
    console.log("HTTP/2 server listening on port 8443");
});

Service Worker

navigation.serviceWorker : interface ServiceWorkerContainer

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <script type="module">
            const { serviceWorker } = navigator;

            serviceWorker.register("/sw.js", { scope: "/" }).then((registration) => {
                console.log("register", { registration });
            });

            serviceWorker.getRegistrations().then((registrations) => {
                console.log("getRegistrations", { registrations });
            });

            if (serviceWorker.controller) {
                console.log("controller", serviceWorker.controller);
            }

            serviceWorker.addEventListener("controllerchange", () => {
                console.log("controllerchange", serviceWorker.controller);
            });

            serviceWorker.addEventListener("message", (event) => {
                console.log("message", event.data);
            });

            serviceWorker.ready.then((registration) => {
                console.log("ready", { registration });
                registration.active.postMessage("Hello from the page!");
            });
        </script>
    </body>
</html>

ServiceWorker's global is ServiceWorkerGlobalScope

sw.js

console.log("ServiceWorker", serviceWorker);

const addResourcesToCache = async (resources) => {
    const cache = await caches.open("v1");
    await cache.addAll(resources);
};

self.addEventListener("install", (event) => {
    event.waitUntil(addResourcesToCache(["/", "/index.html", new Request("/style.css")]));
});

self.addEventListener("fetch", (event) => {
    event.respondWith(caches.match(event.request));
});

ServiceWorker 相当于网络中间人，出于安全相比于普通 Worker 有更多限制：

必须通过同源http脚本创建，不能使用 blob url
register 默认 scope 为 ServiceWorker 脚本所在目录，且 scope 只能在此基础上具体化。（Service-Worker-Allowed）

←Back to home

This work is licensed under CC BY-NC-SA 4.0