浏览器缓存原理是什么？

什么是缓存?

浏览器缓存(BrowerCaching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力

http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、 Last-Modified、Etag。

HTTP 1.0协议中的。简而言之，就是告诉浏览器在约定的这个时间前，可以直接从缓存中获取资源(representations)，而无需跑到服务器去获取。

网站访问速度对一个网站来说是非常重要的，访问慢会流失用户，访问快会大大的提高用户体验。

浏览器缓存大概有两种，200 0K ( from memory/disk cache)和304 Not Modified各有各的优势，把他们发挥好可以大大的提升访问速度

强缓存200 OK (from memory/disk cache)

这种缓存方式已经很普遍，大部分网站的静态文件都采用了，200 OK (from memory cache)或者200 OK(from disk cache)都是直接读取客户端的缓存，无需再请求服务器。一般是在Apache或者Nginx里设置,比如Nginx配置里会有类似这样的配置:

location ~ .*\.(gif|jpg ljpeg lpng I bmp|swf)$
{
	expires 30d;
}
location ~ . *\.(js|css)?$
{
	expires 12h;
}

这样就可以给静态文件缓存了，在有效期内，浏览器会直接读取客户端的缓存，而不用再请求服务器，除非用户清除了缓存或者使用Ctrl+F5强制刷新了页面。

比如上图，是已经缓存过了的，至于有些是200 OK(from memory cache)有些会是200 OK (from diskcache)都差不多，只是从客户端取的位置不一-样而已。除了给静态文件做200 OK (from cache)缓存外，其实我们也可以给某些页面做，比如一些不经常改变内容的ajax页面。

协商缓存304 Not Modified

向服务器发送请求，服务器会根据这个请求的Request Headers的一些参数(etag和last-modified)来判断是否命中协商缓存，如果命中，则返.回304状态码,并带上新的Request Headers通知浏览器从缓存中读取资源;

协商缓存主要表现在Response Headers中的etag和last-modified:

强缓存和协商缓存的header参数

Expires:过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求Cache-Control:当值设为max-age=300时，则代表在这个请求正确返回时间(浏览 器也会记录下来)的5分钟内再次加载资源，就会命中强缓存。Cache-Control除了该字段外，还有下面几个比较常用的设置值:

(1)max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；
(2)s-maxage：和max-age是一样的，不过它只针对代理服务器缓存而言；
(3)public：指示响应可被任何缓存区缓存；
(4)private：只能针对个人用户，而不能被代理服务器缓存；
(5)no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
(6)no-store：禁止一切缓存(这个才是响应不被缓存的意思)。