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 协议缓存机制详解