HTTP 浏览器缓存

BOSS提需求，说页面加载比较慢

看了一下HTTP请求，竟然有一个2.1MB的图片，加载这个图片须要 5秒多 的时间，而后再次请求，仍是从服务器拉取的，没有缓存到浏览器端

目前的这个项目，缩略图都是直接调用的PHP方法生成的缩略图，没有永久生成缩略图静态文件（如今文件管理还比较简陋，没有单独的服务器），并且以前维护项目的程序员也没有对header进行处理。
因而本身找了一些资料，总结一下

---

HTTP和缓存有关的 响应header声明 有 Expires，Cache-control，Last-Modified，Etag
其中 Expires 是 HTTP1.0的内容，若是同时 Expires 和 Cache-control:max-age 存在的话，Expires会被覆盖

Cache-control 主要的就是 max-age： Cache-control:max-age={有效时间} ，有效时间内，会直接使用本地缓存，超过有效期，则从服务器拉取数据。

Last-Modified：是标示这个响应资源的最后修改时间，是基于Cache-control的一个更加有效的缓存控制，

当 相应header存在 Last-Modified 时候，再次请求的时候，若是资源过时(max-age过时)，则会带上 If-Modified-Since，值为上一次访问此资源的 Last-Modified 的值，若是资源没有改变，则返回304；

Etag: web服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识（生成规则由服务器决定），生成算法的话，我测试etag效果的时候用的是MD5值，Apache能够配置对静态文件生成Etag

当 相应header存在 Etag 时候，再次请求此资源的时候，若是资源过时(max-age过时)，则会带上 If-None-Match，值为上一次访问此资源的 Etag 的值，若是从新计算Etag符合结果的话，则返回304；

另外还有一点须要注意（浏览器为chrome）
Cache-control：max-age 过时以前，都是读取本地缓存，而且没有向服务器发送请求。浏览器刷新的话，无论过不过时，都会从服务器加载数据
Last-Modified 和 Etag：文件过时后，每次都会向服务器请求，若是不变则返回状态吗304，不然 为200，并传输消息体；刷新和地址栏输入效果同样
若是是CTRL+F5强制刷新的话，全部的资源都会从新从服务器加载

---

参考

1. 浏览器缓存机制-Laruence

2. Cache-Control: no-cache,Cache-Control: no-store,Pragma: no-cache区别

3. 浏览器 HTTP 协议缓存机制详解