Web 缓存知识整理
转载,备忘。
转载自AlloyTeam:http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/
- 【Web缓存机制系列】1 – Web缓存的作用与类型
- 【Web缓存机制系列】2 – Web浏览器的缓存机制
- 【Web缓存机制系列】3 – 如何构建可缓存站点
- 【Web缓存机制系列】4 – HTML5时代的Web缓存机制
- 【Web缓存机制系列】5 – Web App时代的缓存机制新思路
- 【Web缓存机制系列】6 – 进击的Hybrid App,量身定做缓存机制
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 |
|
4 – HTML5 时代的 Web 缓存机制
- manifest
- LocalStorage