----------
随着现在网页越来越丰富，同时对图片的要求也比较清楚，如果每次用户都通过网络获取内容既缓慢，也增加了访问者的数据成本，合理利用浏览器的缓存也成为前端优化性能很关键的一个方面。
## 浏览器缓存规则 ##
每个浏览器都实现了 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配置策略如下 ###
-该配置默认为自动
-配置示例
网友评论