在前端性能优化中，最重要的就是缓存，使用缓存可以极大的提升浏览器的响应速率。

　　什么是缓存呢？

　　当我们第一次访问某个网站时，浏览器会把网站中的图片等资源存储在电脑中，以备后续使用，第二次访问该网站时，浏览器直接访问缓存中的数据，从而达到提高浏览器的响应效率，优化用户的体验。

　　缓存的优点

　　1.提高浏览器的响应速率；

　　2.减少服务器的访问压力；

　　3.减少对网络的压力。

　　除了浏览器缓存之外，还存在CDN缓存、代理服务器缓存等等；这里主要描述浏览器缓存，浏览器缓存也指的是HTTP缓存，当我们使用浏览器用http协议与服务器交互时，浏览器会使用一种与服务器约定的规则进行缓存操作。

　　缓存的类型

　　浏览器的缓存位置一般分为强缓存和协商缓存。

　　他们之前的区别是强缓存不需要向浏览器发送请求，直接从缓存中读取资源，协商缓存需要询问浏览器缓存是否过期以确定从哪里读取资源。

　　强缓存通过设置http header来实现：Expires 和 Cache-Control。

　　Expires用来指定资源到期的具体时间，是服务器的具体时间点。该属性是HTTP/1中使用的属性，受限于本地时间，如果本地时间修改，可能会造成缓存失效。

　　Cache-Control也用来指定资源的到期时间，他的时间是一个时间范围。比如：Cache-Control：max-age=300，单位是秒，代表该资源的有效时间是5分钟。该属性是HTTP1.1中的属性，如果Expires和Cache-Control都设置，则Cache-Control的优先级高于Expires。

　　协商缓存是在强缓存失效之后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。协商缓存可以通过两种HTTP Header来实现：Last-Modified和ETag。

　　Last-Modified

　　浏览器第一次访问资源时，服务器会在response头中添加时间节点，这个事件点是服务器最后一次修改文件的时间点，浏览器第二次访问该资源时，检测到缓存文件中有last-Modified，就会在第二次请求头中添加if-Modified-Since，值为上次Last-Modified的值，服务器拿到该值后，会与该资源在服务器端的最后修改时间做对比，如果相同，则说明命中缓存，返回304，如果不相同，则会返回200，并返回新资源。

　　ETag

　　和Last-Modified相同，Last-Modified会返回最后修改的时间点，而Etag会返回一个新的token，第二次请求时，token会在If-None-Match中返回给服务器，服务器会比较token是否一致。

　　总结

　　浏览器缓存的强缓存和协商缓存如下图：

作者：张欢    

来源：http://www.51testing.com/html/79/n-7795279.html