缓存的优点
1、减少不必要的数据传输，节省带宽
2、减轻服务器负担，提升网站性能
3、加快客户端网页加载速度
4、用户体验更好
缺点
如果资源发生更改，客户端不及时更新会导致用户获取信息滞后
缓存类型
分为强缓存（本地缓存）和弱缓存（又称协商缓存）
浏览器在向服务器第一次发起请求某资源时，服务端就会在respose的header内对该资源做缓存配置。缓存的时间和类型都是由服务端控制。
当浏览器再次向该资源发起请求时，首先会去获取该资源第一次请求时缓存的响应报文的header信息，判断是否命中强缓存和expries信息，若命中，直接从缓存中获取资源信息，本次请求根本就不会与服务器通信。
如果未命中，浏览器就发送请求到服务器，请求会携带第一次请求返回的响应报文的header信息，由服务器根据这个header信息来比对服务器端的的信息，判断是否命中协商缓存。如果命中，服务器返回新的响应header信息，并更新缓存中对应的header信息，但是并不会返回资源内容，而是告诉浏览器可以直接从缓存中获取，否则返回最新的资源内容。
有关强缓存的header字段
1、expries
这是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串，如果请求的时间在expries之前，那么本地缓存始终有效，否则会发送请求到服务器获取资源。
2、cache-control
这是http1.1时出现的header信息，主要利用该字段的max-age值来判断，它是一个相对时间。资源第一次请求得时间和max-age的有效时间，计算出一个资源过期时间。把请求时的时间拿来与这个时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行。
cache-control除了max-age外，还有几个常用值。
2.1、no-cache：不使用本地缓存，需要使用协商缓存。先与服务器确认第一次请求返回的响应是否被修改，如果之前header中存在Etag,那么请求得时候会与服务器验证，如果资源未被修改则可以避免重新下载
2.2、no-store：禁止浏览器缓存数据，每次客户端请求该资源，都会向服务器发送一个请求，每次都会下载完整资源
2.3、public:可以被所有用户缓存，包括终端用户和cdn等中间代理服务器
2.4、private:只能被终端用户缓存
注意：
如果cache-control与expries同时存在时，强缓存cache-control优先级高
协商缓存有关的header字段
协商缓存是由服务器来确定缓存资源是否可用，见名之意，“协商”就是两个人之间交流一个方案，这里的双方就是客户端和服务器，因此客户端和服务端需要某种标识来进行通信，从而让服务器判断请求资源是否可以访问缓存，涉及两组header字段。
这两组字段成对存在，第一次请求资源得到的响应报文中header字段中如果存在Last-Modified，则后续请求时就会带上if-Modified-Since请求字段；如果一次请求资源得到的响应报文中header字段中是Etag,那么再次请求时则会带上if-None-Match字段。
Last-Modified和if-Modified-Since Etag和if-Node-Match这两对是一一对应的。
1、Last-Modified和if-Modified-Since
两者的值都是GMT格式的时间字符串
浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的时候，在reponse的header加上了Last-Modefied,它的表示这个资源在服务器上最后修改的时间；
浏览器再次跟服务器请求这个资源的时候，在request的header加上if-Modified-Since,它的值就是上一次请求时返回的Last-Modefined的值。
服务器再次收到资源请求时，根据浏览器传过来的if-Modified-Since的值和服务器上最后修改时间判断资源是否变化，如果没有变化返回304 Not Modified，但是不会返回资源内容，如果有变化就返回资源内容。
当服务器返回304状态的时候，response的header中不会再添加Last-Modified,因为资源没有改变，那么Last-Modified也不会改变，当浏览器收到304的响应时，就会从缓存中获取资源。
如果协商缓存没有命中，浏览器从服务器加载资源时，Last-Modified的值会被重新更新并加在response的header上返回给客户端，下次请求时if-Modified-Since的值就会启动上次请求返回的Last-Modified的值。
2、Etag和if-None-Match
这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化这个值就会改变；其判断过程与 Last-Modified、If-Modified-Since类似，与 Last-Modified 不一样的是，当服务器返回304的时候， 由于Etag重新生成过，response header会把这个Etag返回，即使这个Etag跟之前的没有变化。
Modified与ETag可以一起使用，服务器会优先验证ETag， 一致的情况下才会比对Last-Modifed
补充：
HTTP1.1新增的Etag，是为了解决几个Last-Modified难以解决的问题：
1、一些文件可能会发生周期性的更改，但是内容并没有发生变化（仅仅改变的修改时间），这个时候我们并不希望客户端认为我们修改了，而从新返回资源。
2、某些文件修改非常频繁，比如在秒以下的时间内进行修改，这种修改无法判断，某些服务器不能精确得到这个文件的最后修改时间。
这时可以利用Etag能够更加精确的控制缓存。
缓存相关的技术
前端的三种缓存技术：cookie、localStorage、sessionStorage(后两者是h5的时候新出的两种前端缓存技术)
localStorage、sessionStorage、cookie三者的区别
（1）存储大小
cookie数据大小不能超过4k ；
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；
（2）有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除；
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；
（3）数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
（4）作用域
localStorage的作用域限制在文档源的；
localStorage同源的文档之间可以相互访问和修改相同名称的数据；
localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问； 会得到‘Invalid Date’；
sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：
他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；
但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；
这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage；
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
