1.优点1.加快客户端加载网页的速度2.减轻服务器负担，提高网站性能3.减少不必要的数据传输，节省带宽2.直接强缓存使用本地缓存不需要与服务器通信。相关的header字段expire一个未来的时间，表示请求的有效期，当前请求一直使用到过期为止。例如：Thu,15Apr209920:00:00GMT，表示请求在2099年4月16日到期，当前请求在此之前有效。cache-control，优先级高于expiresvalue的是一个时间段，请求有效的最大时间段，限制：1.需要记住请求时间，需要计算是否在这个时间段内2.服务器和客户端时间必须一致。因为是时间段，所以表示可以设置一些默认值，常见的默认值设置：no-cache：不使用本地缓存。向浏览器发送新鲜度验证请求publicc：在任何情况下缓存（即使是HTTP认证的资源）private：只能由最终用户的浏览器缓存，不允许CDN等中继缓存服务器缓存no-store：禁止浏览器不缓存数据，也禁止保存到临时文件，每次重新请求，多次设置cache-control，最高优先级max-age表示缓存时间为315♂000秒（10年）；公共意味着它可以被浏览器和代理服务器缓存。代理服务器一般可以用nginx；不可变意味着资源永远不会改变，但实际上资源不是永远的。它被设置为用户可以刷新页面不要询问服务器何时到了！你是什??么意思？也就是说，如果只设置cahe-control:max-age=315360000，public，这就是强缓存。用户每次正常打开这个页面，浏览器都会判断缓存是否过期。读取数据；但是一些“聪明”的用户会点击浏览器左上角的刷新按钮来刷新页面。这时候即使资源没有过期（10年没过这么快），浏览器也会直接向服务器请求。这意味着额外的请求被消耗了。这时候就相当于协商缓存的过程；强缓存总结1.cache-control:max-age=xxxx，公共客户端和代理服务器都可以缓存资源；客户端可以在xxx秒内缓存资源，在有效期内，如果有请求资源的需求，会直接读取缓存，状态码：200，如果用户进行了刷新操作，会发起一个http向服务器请求2.cache-control:max-age=xxxx,privateonly允许客户端缓存资源；代理服务器不缓存客户端，xxx秒内直接读取缓存，状态码：2003.cache-control:max-age=xxxx，不可变客户端在xxx秒有效期内，如果有资源被请求时，会直接读取缓存，状态码：200，即使用户进行了刷新操作，也不会向服务器发送http请求4.cache-control:no-cache跳过设置强缓存，但是确实如此不妨碍设置协商缓存；一般如果做了强缓存，只有在强缓存失效的时候才会使用协商缓存。如果设置了no-cache，则不会加强强缓存，每次请求都会向服务器询问。5.cache-control：no-store不缓存，这样会阻止client和server缓存，也没有所谓的强缓存或协商缓存。3、协商缓存，将资源的一些相关信息返回给服务器，让服务器判断浏览器是否可以直接使用本地缓存。整个过程至少和服务器通信一次1.相关头域Last-Modified/If-Modified-Since（均为Time格式字符串）过程（访问频率）1.浏览器第一次发送请求，并且服务器在返回的响应头中添加Last-Modified，表示资源的最后修改时间。2.再次请求资源，在requset的头部添加If-Modified-Since，值为上次请求返回的Last-Modified值。3、服务端根据请求中传递的值判断资源是否发生变化。Modified值为4。304从缓存中加载资源，否则直接从服务器加载资源与Modified-Since不同的是，当返回304时，ETag仍会重新生成返回给浏览器。Etag的优先级高于Last-Modified//响应标头etag:'5c20abbd-e2e8'last-modified:Mon,24Dec201809:49:49GMT//请求标头变为if-none-matched:'5c20abbd-e2e8'if-modified-since:Mon,24Dec201809:49:49GMT2.为什么会有etag？1、有些文件可能会周期性的改变，但其内容不会改变（只有修改后的修改时间）。这个时候，我们不希望客户端认为文件被修改了，重新获取；2.有些文件的修改非常频繁，比如一秒内修改，（比如1s内N次），if-modified-since可以检查的粒度是秒级的，无法判断这个修改（或者UNIX记录MTIME只能精确到秒）；3、部分服务器无法准确获取文件的最后修改时间3、为什么两个属性一起出现在协商缓存中？协商缓存是浏览器判断资源是否可用，所以需要两个标识符。第一个是第一个请求的响应头上的一个字段（Last-Modified或Etag），第二个是后续请求中对应的请求字段（If-Modified-Since或If-None-Match）。两个标签一起出现才有意义，单独出现是没有作用的。四、如何设置Strongcache和negotiationcache1.后端服务器如nodejs:res.setHeader('max-age':'3600public')res.setHeader(etag:'5c20abbd-e2e8')res.setHeader('last-modified':Mon,24Dec201809:49:49GMT)2.如何使用nginx配置？比如现在用vue-cli打包后生成的单页文件有一个html，还有一堆js??cssimg资源，这些文件怎么设置，核心要求是1.一定要有缓存，毫无疑问2.发送新包时，我想避免加载旧的缓存资源。我的做法是：index.html文件使用协商缓存。原因是用户直接向服务器请求index.html，没有占用浏览器缓存，这样可以确保资源更新，用户可以立即访问到新资源。如果服务器返回304，就拿这个时候浏览器缓存的index.html，切记不要设置强缓存！！！5.刷新影响？ctrl+f5强制刷新时，从服务器加载，跳过强缓存和协商缓存。-刷新f5时会跳过强缓存，但会检查协商缓存??感谢阅读本文。如果本文对您有所帮助，请不要吝啬您的点赞，您的“点赞”是我前进的动力；欢迎关注公众号【冥想看前端】一起学习进步。
