| modified | Thursday 1 May 2025 |
|---|
Wednesday, April 3, 2019 at 15:10
页 面 缓 存
前 端 工 程 师 Toweave
页 面 缓 存 二 直 是 前 端 开 发 中 我 们 关 注 比 较 少 的 , 研 究 了 一 些 资
料 , 总 结 了 一 些 心 得 , 记 录 下 来 共 同 探 讨 。 合 理 的 页 面 缓 存 可 以
让 页 面 执 行 的 效 率 提 高 很 多 ( 在 第 一 次 访 问 或 者 CTRL+F5 强 制 刷
新 的 时 候 , 缓 存 的 效 果 是 体 现 不 出 来 的 ) , 而 不 是 我 们 一 味 的 设
置 cache- control 为 no- CaChe。 当 然 了 如 果 缓 存 使 用 不 当 , 也 会 带
口 比 如 缓 存 参 数 设 置 不 合 理 , 会 导 致 请 求 得 到 的 是 旧 的 页
o
. 缓 存 原 理
首 先 一 t o 标
7 E
1 | 求 皂 加
载 缓 存 的 资 源 , 减 少 HTTP 请 求 次 数 与 传 输 数 据 量 , 以 此 提 高 浏 览
效 率 。 以 下 是 一 个 请 求 的 过 程 讲 解 。
第 一 次 请 求
浏 览 器 如
载 , 团 诊 挂 人 河 根 个
浏 览
5 应 报 我 们
以 二 仅 圈 芸 萧 应 接 交 央 为 例 锐 解 裕 芸 内 定 这 个 响 应 报 头 可 以
看 到 以 下 信 息
1 响 应 状 态 码 是 200, 说 明 是 正 确 返 回
2 rarhe-rnntrcl8 定 了 有 效 时 间 “ 存 戒 个 时 间 内 新 朱 开 新 网 一
载 , 其 中 就 包 括 缓 存 设 置 参 数 。 接 下 来 我 们 在 地 址 栏 输 入 一 个
url, 这 时 候 浏 览 器 会 发 送 一 纳 不 人
A J 厌
下
沥 根 2ou 说 明 是 正 确
cache-control 设 定 了 有 效 时 间 , 调 & 一 时 间 内 新 打 开 新 网 页
或 者 地 址 栏 回 车 ) 不 需 要 去 请 求 服 务 器 。
5 命 崔
(
报 文 内 容 类 型 是 image/gif。
3 最 近 修 改 时 间 是 30 July 2008 10:23:00, 最 近 修 改 时 间 在 浏 览 器
刷 新 的 时 候 有 很 大 的 用 处 , 浏 览 器 刷 新 的 时 候 , 会 发 送 对 该 图 片
请 求 的 报 文 , 得 剑 的 响 应 报 文 中 如 果 最 近 修 改 时 间 和 缓 存 的 一
致 , 那 么 翡 览 器 将 会 从 缓 存 中 读 取 该 图 片 的 信 息 ( 状 态 码 是
304) , 如 果 两 个 时 间 不 一 致 , 沥
住 , 并 缓 存 。 口 他 信 息
要 胺 R
倩 命 根 莲 盐 觐 赤 倩 献 报 文 头 的 信 息 , 确 定 一 些 缓 存 规 则 , 比
o 丞 设 置 了 max-age 的 再 次 打 开 不 请 求 等 , 更
多 的 信 息 可 以 参 考 三 、 四 章 节 。
再 次 请 求
再 次 请 求 的 时 候 , C 还 是 以 上 面 请 求 的
那 个 图 片 ( 设 置 了 max-age) 为 例 。 如 果 这 个 时 候 我 们 在 地 址 栏
按 照 原 有 url 回 车 的 话 , 针 对 该 图 片 , 是 没 有 发 送 HTTP 请 求 的 , 更
没 有 请 求 服 务 器 资 源 , 浏 览 器 直 接 从 缓 存 空 间 读 取 该 图 片 。 如 果
这 个 时 修 刷 新 , 则 是 发 送 HTTP 请 求 , 得 到 以 下 的 响 应 报 文 : 检
目 得 知 该 文 件 没 有 修 改 , 那 么 浏 览 器 将 从 缓 存 中 获 取 该
缓 存 对 象
这 新 , 下 的 响 应 报 文 :
目 得 知 该 文 件 没 有 修 改 , 那 么 浏 览 器 将 从 缓 存 中 获 取 该
缓 存 对 象
仁 口 主 要 缓 存 什 么 东 西 呢 ? 我 们 首 先 要 明 确 一 下 Content-Type 的
1 人
据 之 前 , 就 先 发 逻 # 标 思 数 搬 的 MIME 类 型 的 信 息 ,
Content-type 关 键 字 进 行 定 义 , 伟 text/css、
application/x-javascript、image/gif、imagejjpeg、audio/x-mpegurl
等 , 如 果 这 些 类 型 是 浏 览 器 能 直 接 识 那 么 浏 览 器 就 直 接 打 开 显 示
出 李 , 否 则 要 关 联 注 册 表 , 找 到 对 应 的 程 序 来 打 开 , 比 如 audio。
贡 商 缓 存 缓 存 对 象 除 了 texty/html 乏 外 , image/gif、image/jpeg 的 cache-
control 一 般 都 通 过 设 置 max- age 来 实 纲 缓 存 , application/x-javascript
通 过 Last-Modified 或 者 ETags 来 实 现 。
缓 存 规 则
怎 么 来 设 定 缓 存 呢 ? 主 要 有 以 下 三 种 手 段 :
默 认 缓 存 规 则 一
应 用 服 务 器 是 有 默 认 缓 存 规 则 的 , 比 如 缓 存 对 象 他 content-
type=text/html, 应 用 服 务 器 给 出 的 默 认 响 应 报 文 头 中 ,cache-
control 一 般 都 设 置 为 private。 常 见 的 tomcat 和 webiogic 默 认 缓 存
规 则 是 存 在 差 异 的 。 当 然 这 些 应 用 服 务 器 的 默 认 缓 存 规 则 是 可 以
: 咤 认 许 ] 和 改 以 2064
怎 么 来 设 定 缓 存 呢 ? 主 要 有 以 下 三 种 手 段 :
. 单 个 设 定
单 个 设 定 就 是 我 们 常 见 的 , 在 html 的 meta 区 域 设 置 cache-
control,max-age,expires 等 。 应 用 服 务 器 在 解 析 到 这 些 参 数 之
后 , 会 在 响 应 报 文 中 明 确 指 出 , 告 诉 浏 览 器 当 前 页 面 的 缓 存 规
则 。 具 体 内 容 可 以 参 考 《http meta 简 介 》 。
1 过 滤 器 对 同 一 类 页 面 元 素 实 施 相 同 的 缓 存 策 略 , 可 以 使 用 过 源 器 来 实
现 , 通 过 判 定 缓 存 对 象 类 型 , 在 相 应 中 添 加 相 同 的 缓 存 规 则 。 具 体 代 码
参 考 web.xml 和 ResponseHeaderFilter.java。
1 eTags 参 考 http://www.infoq.com/articles/…。 翻 译 版 《 使 用
ETags 减 少 Web 应 用 带 宽 和 负 载 》 。
。 C 口
( 这 部 分 内 容 是 自 己 测 试 的 成 果 , 相 信 存 在 误 差 。) IE 不 同 的 重
新 浏 览 方 式 对 应 的 数 据 请 求 是 有 差 异 的 ( 都 可 以 使 用 HttpWatch
明 确 看 到 相 应 的 报 文 内 容 ) 。
s 9.2 IE 前 进 , 后 退
一 般 来 说 这 种 重 新 浏 览 方 式 数 据 都 是 取 自 缓 存 。
比 如 Cache-control 设 定 为 private、must-revalidate、max-age 的
内 容 。 Cache-control 为 no-cache, 还 需 要 再 次 请 求 服 务 器 , 因
为 这 种 情 况 是 不 会 在 浏 览 器 缓 存 区 留 下 任 何 痕 迹 。
。 一 一 广 土 一 五 | 儿 山 Eu F 小 -
1 过 滤器 对 同 一 类 页 面 元 素 实 施 相 同 的 缓 存 策 略 , 可 以 使 用 过 滤 器 来 实
现 ,
通 过 判 定 缓 存 对 象 类 型 , 在 相 应 中 添 加 相 同 的 缓 存 规 则 。 具 体 代 砥
参 考 web xml 和 ResponseHeaderFilter.java。
1 eTags 参 考 http://www.infoq.com/articles/…。 翻 译 版 《 使 用
ETags 减 少 Web 应 用 带 宽 和 负 载 》 。
。 9.1IE 重 新 浏 览 方 式 对 缓 存 的 影 响
( 这 部 分 内 容 是 自 己 测 试 的 成 果 , 相 信 存 在 误 差 。) IE 不 同 的 重
新 浏 览 方 式 对 应 的 数 据 请 求 是 有 差 异 的 ( 都 可 以 使 用 HttpWatch
明 确 看 到 相 应 的 报 文 内 容 ) 。
9.2 IE 前 进 , 后 退
一 般 来 说 这 种 重 新 浏 览 方 式 数 据 都 是 取 自 缓 存 。
比 如 Cache-control 设 定 为 private、must-revalidate、max-age 的
内 容 。 Cache-control 为 ho-cache, 还 需 要 再 次 请 求 服 务 器 , 因
为 这 种 情 况 是 不 会 在 浏 览 器 缓 存 区 留 下 任 何 痕 迹 。
9.3 IE 转 到 / 地 址 栏 回 车 命 吴
这 种 情 况 是 根 据 IE 的 设 置 来 确 定 怎 么 访 问 数 据 ,IE 的 Internet 选 项
中 Internet 临 时 文 件 的 设 置 有 这 么 几 个 选 项 : 每 次 访 问 网 页 时 检
查 、 每 次 启 动 IE 时 检 查 、 自 动 ( 默 认 ) 和 不 检 查 , 这 几 个 选 项 的
设 定 其 实 是 影 响 发 送 的 HTTP 报 文 表 头 的 。 仅 仅 着 一 下 默 认 情 况
( 自 动 ) , 自 动 的 话 , IE 查 看 指 定 网 页 的 时 修 不 检 查 上 次 已 经 查
看 过 的 这 个 网 页 是 否 已 经 发 生 改 变 ( 有 点 绕 ) 。 比 如 text/html
(private) 1 application/x-javascript 等
就 不 再 请 求 服 务 器 了 , 而 是 来 自 缓 存 。 指 定 了 max-age 值 的 img 也
工 技 g 力 英 英 汀 知 直 接 取 自 缓 存 。 详 细 解 读 可 以 参 考
9.4 IE 新 窗 口 , 如 链 接 打 开
如 果 页 面 指 定 cache-control 的 值 为 private、 no-cache、must-
revalidate, 那 么 打 开 新 窗 口 访 问 时 都 会 重 新 访 问 服 务 器 。 如 果 指
寇 了 max-age 值 , 那 么 在 此 值 内 的 时 间 里 就 不 会 重 新 访 问 服 务
一 Interneu 口 J 心 什 国 仅 真 月 怠 么 儿 1 怡 - 贝 . 母 人 0| 可 罚 见 白 仪
查 、 每 次 启 动 IE 时 检 查 、 自 动 ( 默 认 ) 和 不 检 查 , 这 几 个 选 项 的
设 定 其 实 是 影 响 发 送 的 HTTP 报 文 表 头 的 。 仅 仅 着 一 下 默 认 情 况
( 自 动 ) , 自 动 的 话 ,IE 查 看 指 定 网 页 的 时 候 不 检 查 上 次 已 经 查
看 过 的 这 个 网 页 是 否 已 经 发 生 改 变 ( 有 点 绕 ) 。 比 如 textyhtmi
(private) 依 旧 会 去 请 求 服 务 器 数 据 ,application/x-javascript 等
就 不 再 请 求 服 务 器 了 , 而 是 来 自 缓 存 。 指 定 了 max-age 值 的 img 也
言 [ 衍 “ 直 接 取 自 缓 存 。 详 细 解 读 可 以 参 考
IE 的 言 恳 。
9.4 IE 新 窗 口 , 如 链 接 打 开
如 果 页 面 指 定 cache-control 的 值 为 private、 no-cache、must-
revalidate, 那 么 打 开 新 窗 口 访 问 时 都 会 重 新 访 问 服 务 器 。 如 果 指
露 了 max-age 值 , 那 么 在 正 值 内 的 时 间 里 就 万 会 重 新 访 问 服 务
9.5 IE 刷 新
不 管 Cache-control 的 为 何 值 , 都 会 检 查 服 务 器 。 检 查 要 访 问 网 页
的 最 新 版 本 , 如 果 存 在 最 新 版 本 , 则 返 回 最 新 咤 页 的 内 容 , 并 更
新 缓 存 ; 如 果 不 存 在 最 新 版 本 , 刘 只 返 回 标 题 , 内 容 去 缓 孙 中 获
9.6 IE 强 制 刷 新 (CTRL+F5) 、 目 国
要 访 问 网 页 的 服 务 器 最 新 版 本 , 返 回 最 新 的 版 本 , 英 删 除 缓
的 相 应 内 容 , 将 最 新 的 内 容 写 入 缓 存 。 其 实 强 制 刷 新 情 况
, 请 求 的 HTTP 报 文 头 里 , Cache- control 为 no- Cache。
9.7 脱 机 工 作
这 是 一 种 比 较 特 殊 的 重 新 浏 览 方 式 , 这 种 情 况 下 是 没 有 任 何 面 向
服 务 器 的 请 求 过 程 的 , 直 接 去 浏 览 器 的 缓 存 寻 找 数 据 , 如 果 缓 存
没 有 命 中 , 脱 机 就 没 办 法 工 作 了 。 显 而 易 见 的 是 ,no-cache 方
式 , 是 没 办 法 脱 机 工 作 的 。