前端面试题之浏览器缓存
浏览器缓存指的是http缓存，而storage是应用层缓存，不一样
浏览器缓存分为两类：强缓存和协商缓存
先了解一下浏览器缓存机制：
缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。
第一次请求
后续请求
1.浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
2.下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
3.服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；
4.如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；
强缓存
浏览器在规定时间内强制使用浏览器内的缓存：
Expires: Thu, 18 Oct 2018 13:28:45 GMT (http1.0)
意思是这个时间之前强制使用浏览器缓存，缺点是这个时间是绝对时间，所以客户端时间不正确会导致许多错误
Cache-Control: max-age=3600 (http1.1)
意思是客户端相对当时客户端3600秒之内强制使用浏览器缓存，优点是不管客户端时间如何，只要没超过3600秒，都能正确使用缓存
Expires和Cache-Control都存在时以Cache-Control为准
协商缓存
与询问服务器是否需要使用浏览器缓存
Last-Modified/If-Modified-Since
二者的值都是GMT格式的时间字符串，具体过程：
- 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
- 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
- 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304
Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not
Modified的响应时，response
header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response
header - 浏览器收到304的响应后，就会从缓存中加载资源
- 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值
Etag
web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。
If-None-Match
当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；