HTTP 缓存详解

----------

随着现在网页越来越丰富，同时对图片的要求也比较清楚，如果每次用户都通过网络获取内容既缓慢，也增加了访问者的数据成本，合理利用浏览器的缓存也成为前端优化性能很关键的一个方面。

## 浏览器缓存规则 ##

每个浏览器都实现了 HTTP 缓存，我们所要做的就是，确保每个服务器响应都提供正确的 HTTP 头指令，以指导浏览器何时可以缓存响应以及可以缓存多久。

### 缓存机制 ###

**本地缓存阶段**：

> 先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器；

**协商缓存阶段**：

> 如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器,然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源；

**缓存失败阶段**：

> 当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。

### 缓存规范 ###


### 不同浏览器下缓存策略实现 ###


> 说明：以上场景均为静态资源的缓存策略，针对所有POST请求均返回200，针对rest接口的get请求非ie6浏览器做304，ie6返回200

>

>**编码优化：建议尽量在javascript中不要使用location.reload()，这样会产生大量的304请求，推荐使用window.open()**

### 配置完max-age的浏览器缓存实现 ###


>**说明：根据以上两张图的数据，配合用户量和使用浏览器的相关数据，可精确算出前端界面需要的网络带宽，这个新系统上线时非常重要**

### cache缓存策略配置原则 ###


### 国内知名网站缓存策略 ###


### 推荐的配置策略 ###

1.**针对静态资源js，css，图片增加了md5或时间戳的，js和css的max-age可设置为一个月，图片的可设置为半年或一年**

2.**针对html和没有加戳的静态资源[css,js,图片]，max-age推荐120s，如果用户对性能要求较高实时性不太关注的情况下，可适当设置为1分钟。**

3.**针对内部系统，同时为浏览器为ie的场景下，可设置ie缓存策略为从不检查。提高本地缓存的能力，具体配置IE方法可参考下面的示例配置**

### nignx配置示例 ###

1.**静态资源配置示例**

`nginx.conf

location ~* \.(js|css|flash|media|jpg|png|gif|dll|cab|CAB|ico)$ {

root   html;

index  index.html index.htm;

expires  30d; //缓存时间为30d

}

location ~* \.(html|htm)$ {

root   html;

index  index.html index.htm;

expires  10s;

}

`

2.**反向代理配置**

`nginx.conf

location /api {

add_header Cache-Control max-age=100; //只针对get的请求有用，默认单位为s

proxy_pass  http://nodecms;

}

`

### IE配置策略如下 ###

-该配置默认为自动

-配置示例