缓存分为服务端侧(server side,好比 Nginx、Apache)和客户端侧(client side,好比 web browser)。php
服务端缓存又分为 代理服务器缓存 和 反向代理服务器缓存(也叫网关缓存,好比 Nginx反向代理、Squid等),其实普遍使用的 CDN 也是一种服务端缓存,目的都是让用户的请求走”捷径“,而且都是缓存图片、文件等静态资源。html
客户端侧缓存通常指的是浏览器缓存,目的就是加速各类静态资源的访问,想一想如今的大型网站,随便一个页面都是一两百个请求,天天 pv 都是亿级别,若是没有缓存,用户体验会急剧降低、同时服务器压力和网络带宽都面临严重的考验。前端
浏览器缓存控制机制有两种:HTML Meta标签 vs. HTTP头信息node
浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。可是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者能够在HTML页面的<head>节点中加入<meta>标签,代码以下:web
1segmentfault |
|
上述代码的做用是告诉浏览器当前页面不被缓存,每次访问都须要去服务器拉取。使用上很简单,但只有部分浏览器能够支持,并且全部缓存代理服务器都不支持,由于代理不解析HTML内容自己。而普遍应用的仍是 HTTP头信息 来控制缓存,下面我主要介绍HTTP协议定义的缓存机制。缓存
1服务器 2网络 3 4 5 6 7 8 9 |
|
1 2 |
|
1 2 |
|
1 2 3 |
|
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的惟一标识符,可以更加准确的控制缓存。Last-Modified与ETag一块儿使用时,服务器会优先验证ETag。
浏览器缓存行为还有用户的行为有关,若是你们对 强制刷新(Ctrl + F5) 还有印象的话应该能马上明白个人意思~
用户操做 |
Expires/Cache-Control |
Last-Modified/Etag |
地址栏回车 |
有效 |
有效 |
页面连接跳转 |
有效 |
有效 |
新开窗口 |
有效 |
有效 |
前进、后退 |
有效 |
有效 |
F5刷新 |
无效(BR重置max-age=0) |
有效 |
Ctrl+F5刷新 |
无效(重置CC=no-cache) |
无效(请求头丢弃该选项) |
具体请参考文末 Refer [6]
[1] 浏览器缓存机制
http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html
[2] Web 开发人员需知的 Web 缓存知识
http://www.oschina.net/news/41397/web-cache-knowledge
[3] 浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
http://blog.csdn.net/eroswang/article/details/8302191
[4] 在浏览器地址栏按回车、F五、Ctrl+F5刷新网页的区别
http://cloudbbs.org/forum.php?mod=viewthread&tid=15790
http://blog.csdn.net/yui/article/details/6584401
[5] Cache Control 與 ETag
https://blog.othree.net/log/2012/12/22/cache-control-and-etag/
[6] 缓存的故事
http://segmentfault.com/blog/animabear/1190000000375344
[7] Google的PageSpeed网站优化理论中提到使用Etag能够减小服务器负担
https://developers.google.com/speed/docs/pss/AddEtags
[8] yahoo的Yslow法则中则提示谨慎设置Etag
http://developer.yahoo.com/performance/rules.html#etags
分类: 前端优化