转载，备忘。

转载自AlloyTeam：http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/

1 – Web 缓存的作用与类型

Web 缓存的作用

  • 减少网络带宽消耗
  • 降低服务器压力
  • 减少网络延迟，加快页面打开速度

Web 缓存的类型

  • 数据库数据缓存
  • 服务器端缓存
  • 浏览器端缓存
  • Web 应用层缓存

2 – Web 浏览器的缓存机制

浏览器端的缓存规则

  • 过期机制
  • 验证机制

浏览器缓存的控制

  • 使用 HTML Meta 标签
  • 使用缓存有关的HTTP消息报头
缓存相关的HTTP消息报头
  • Cache-Control/Expires
  • Last-Modified/ETag
用户操作 Cache-Control/Expires Last-Modified/ETag
地址栏回车 有效 有效
页面链接跳转 有效 有效
新开窗口 有效 有效
前进后退 有效 有效
F5刷新 无效 有效
强制刷新 无效 无效

当用户在按F5进行刷新的时候，会忽略 Expires/Cache-Control 的设置，会再次发送请求去服务器请求，而 Last-Modified/Etag 还是有效的，服务器会根据情况判断返回304还是200；而当用户使用 Ctrl+F5 进行强制刷新的时候，只是所有的缓存机制都将失效，重新从服务器拉去资源。

无法被浏览器缓存的请求

  • HTTP信息头中包含 Cache-Control:no-cache，pragma:no-cache，或 Cache-Control:max-age=0 等告诉浏览器不用缓存的请求
  • 需要根据 Cookie，认证信息等决定输入内容的动态请求是不能被缓存的
  • 经过 HTTPS 安全加密的请求
  • POST 请求无法被缓存
  • HTTP 响应头中不包含 Last-Modified/Etag，也不包含 Cache-Control/Expires 的请求无法被缓存

3 – 如何构建可缓存站点

  • 同一个资源保证URL的稳定性
  • 给 CSS、JS、图片等资源增加HTTP缓存头，并强制入口 HTML 不被缓存
  • 减少对 Cookie 的依赖
  • 减少对 HTTPS 加密协议的使用
  • 多用 GET 方式请求动态 CGI

如何给站点增加缓存机制

服务器配置

Apache 相关配置参考：mod_expires、mod_headers

编写可缓存的动态脚本

PHP 实现代码实例如下

1
2
3
4
5
6
<?php
Header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 3;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
?>

4 – HTML5 时代的 Web 缓存机制

  • manifest
  • LocalStorage