浏览器缓存机制

如果进入一个页面需要加载静态资源文件，每次进入都要请求，是很昂贵的，用户体验也很差。

因此可以把静态资源放置到 CDN 服务器，不占用业务服务器的网络带宽，而达到更好的用户体验，也就是静态资源服务器。

还可以通过浏览器缓存进一步的优化性能。浏览器缓存主要基于http协议的缓存机制。

首先介绍一下expires：

http1.0中定义，用于控制缓存失效的时间，这里是失效的时间，精确到秒。

在http1.1中，新增了一个响应头Cache-Control，值包含public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。

 

 max-age（单位为s）

 

指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在max-age这段时间里浏览器就不会再向服务器发送请求了。

 

• public

 

指定响应可以在代理缓存中被缓存，于是可以被多用户共享。如果没有明确指定private，则默认为public。

 

• private

 

响应只能在私有缓存中被缓存，不能放在代理缓存上。对一些用户信息敏感的资源，通常需要设置为private。

 

• no-cache

 

表示必须先与服务器确认资源是否被更改过（依靠If-None-Match和Etag），然后再决定是否使用本地缓存。

 

• no-store

 

绝对禁止缓存任何资源，也就是说每次用户请求资源时，都会向服务器发送一个请求，每次都会下载完整的资源。通常用于机密性资源。

可能会有疑问，为什么有expires了之后，还会有cache-control中的max-age呢？因为1.expires是响应结束时间，而max-age是时间段，在时间段内都会载入缓存。2.expires时间是相对于服务器，如果浏览器时间与服务器时间不同的话，缓存可能失效。

在缓存过期时间内，浏览器直接访问缓存。如果缓存失效，那么浏览器是怎么处理的呢？

 If-Modified-Since与Last-Modified：http1.0定义了响应头Last-Modified是指文件上次修改时间，请求头If-Modified-Since是指在缓存过期后请求是将文件最后修改时间发送过去。但是存在一些缺陷：

1. Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度
2. 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
3. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

因此http1.1新增了Etag与If-None-Match。Etag是由服务端生成的一段hash字符串，标识资源的状态，具有唯一性。在文件过期后，如果存在etag，请求加上If-None-Match。在Etag和Last-Modified同时应用时，优先验证Etag。

缓存机制如下图：

图片来自:http://www.cnblogs.com/slly/p/6732749.html