胖飚帮学：浏览器缓存机制

浏览器缓存机制 

浏览器在加载资源的时候，会根据http请求头来判断是否命中强缓存：如果命中则从本地缓存获取资源，请求不会发送到服务器；如果没有命中强缓存，则会发送请求到服务器，然后服务器根据请求头中参数来判断是否命中协商缓存：若命中则返回告知客户端从缓存中获取资源，否则将最新的资源返回。 

强缓存与协商缓存的共同点是：如果命中都会从缓存中获取资源，而不从服务端获取。区别在于：强缓存不会发送请求到服务器，而协商缓存会发送请求。

强缓存原理、管理、应用

强缓存原理：第一次请求资源时， http1.0中，服务端返回 Expires 设置过期时间（绝对时间）。http1.1中，服务端返回 Cache-Control 设置缓存有效时间（相对时间），浏览器连同资源缓存到本地。 再次请求资源时，客户端从缓存中找到资源，比对当前时间是否小于Expires的时间（1.0），或者与上次请求的时间做差值看是否在Cache-Control的有效时间内（1.1），如果在有效期内则从缓存中获取，否则从服务端从新请求。重新请求之后，服务端会更新 Expires/Cache-Control。 两者比较，后者更为有效安全，因为客户端时间和服务端时间可能会有较大差距。当两者同时存在时，Cache-Control优先级更高。

强缓存的设置： 第一种：通过代码方式在服务器返回的响应头中添加Expires或Cache-Control；第二种：配置服务器，在响应资源时统一添加Expires或Cache-Control。

强缓存的应用： 强缓存是前端性能优化最有力的工具，对于有大量静态资源的网页，一定要利用强缓存，提高响应速度。

协商缓存原理、管理、应用

协商缓存是根据 Last-Modified/If-Modified-Since 和 ETag/If-None-Match 两对header来控制工作的。

Last-Modified/If-Modified-Since原理： 浏览器首次从服务端获取资源时，服务端会在返回头中添加Last-Modified来记录资源上次修改时间；如果下次浏览器未命中强缓存时，请求服务端的时候会在请求头中通过If-Modified-Since将之前服务端返回的资源更新时间传入，然后服务端进行判断文件是否修改，若无修改则返回304，告知客户端从缓存获取资源，否则返回新的资源并更新Last-Modified值。

由于Last-Modified记录的是文件修改时间，但有时资源内容修改，最后修改时间却不会改变，所以就会影响协商缓存的可靠性，此时就有了ETag/If-None-Macth的产生。

ETag/If-None-Match原理： 浏览器首次从服务端获取资源时，服务端会在返回头中添加ETag来标记资源的唯一标识字符串（通过算法实现，内容只要改变，唯一标识就会改变）；如果下次浏览器未命中强缓存时，请求服务端时会在请求头中通过If-None-Match将之前服务端返回的资源标识传入，然后服务端进行判断文件是否修改，若无修改则返回304，告知客户端从缓存获取资源，否则返回新的资源并更新ETag值。