浏览器缓存，不得不说的面试问题！

写在前面

缓存从微观上可以分为以下几类

• 浏览器缓存（今天我们重点说的）
• 代理缓存
• CDN缓存
• 数据库缓存
• 应用缓存

浏览器缓存

访问网页的时候，需要从服务器下载一些页面渲染所需的资源，比如html文档，css，js，图片等，有的资源是很少变动的，比如代表公司的logo图。如果把这些资源缓存下来，很自然减少了服务器的负载，而且页面加载时间也会缩短。 但是，要不要使用缓存，这个资源浏览器又要缓存多久，这些浏览器怎么知道？别急，这都是服务器控制的，http的返回头（ http response header ）中会有一些字段来控制，下面我们来具体聊聊这些字段。

http缓存

强缓存

不会向服务器发送请求，直接从缓存中读取资源
设置强缓存

• 1.expires(http/1.0,时间格式GMT)
  • 1.表示相应头里的过期时间，浏览器再次加载资源时如果在时间之内则存在缓存
• 2.cache-control(http/1.1,单位 秒）
  • 1.max-age(表示缓存内容在 xx秒后消失)
  • 2.no-cache(要根据协商缓存是否需要缓存客户端)
  • 3.no-store(所有内容都不会被缓存)
  • 4.public(所有内容都将被缓存包括客户端和代理服务器)
  • 5.private(所有内容只有客户端可以缓存)
  • 6.s-maxage(只用于共享缓存和max-age效果一样，只是max-age用于普通缓存)

协商缓存

• 当协商缓存生效时，返回304和Not Modified
• 它指的时强缓存失效后，浏览器携带缓存标示向服务器发起请求，由服务器决定是否需要使用缓存
  设置协商缓存
• 1.Last-Modified和if-Modified-Since
  • 1.Last-Modified时服务器返回资源同时在header添加的，表示这个资源在服务器上最后修改时间，浏览器接受后缓存文件和header
  • 2.浏览器下次请求时，检测是否由Last-Modified字段，如果存在则在请求头添加if-Modified-Since，该字段值就是上次服务器返回的值
  • 3.如果没有变化则返回304直接从缓存中读取，否则返回新资源
• 2.ETag和if-None-Match
  • 1.ETag时上一次加载资源时，服务器返回的。它的作用时唯一用来标识资源是否有变化
  • 2.浏览器下次请求时将ETag值传入if-None-Match中，服务端匹配传入的值与上次是否一致，如果一致返回304否则返回新资源和新的ETag

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

本地缓存

本地缓存主要有以下几种，localStorage，sessionStroage，cookie，websql，indexDB

重点说一下前三者的区别