浏览器缓存那些事

浏览器读取资源的流程

• 浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
• 如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified或者etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源
• 如果前面两者都没有命中，直接从服务器加载资源

强制缓存（不发送请求）

1. 如何设置
   通常我们会同时设置expires和cache-control两种，保证无论在http1还是1.1的情况下都有效

   • expires
     过期时间，如果设置了时间，则浏览器会在设置的时间内直接读取缓存，不再请求

   • cache-control

     http1.1新标准，包括这些属性：

     （1）max-age：用来设置资源（representations）可以被缓存多长时间，单位为秒；
     （2）s-maxage：和max-age是一样的，不过它只针对代理服务器缓存而言；
     （3）public：指示响应可被任何缓存区缓存；
     （4）private：只能针对个人用户，而不能被代理服务器缓存；
     （5）no-cache：强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到请求，然后判断资源是否变更，是则返回新内容，否则返回304，未变更。这个很容易让人产生误解，使人误以为是响应不被缓存。实际上Cache-Control:no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
     （6）no-store：禁止一切缓存（这个才是响应不被缓存的意思）。

2. 缓存的两种表现形式

   • memory cache

     来自于内存的数据，会随着进程的结束而清除，读取速度相对快(0ms)
     一般存放脚本，图片，字体等文件

   • disk cache

     来自于硬盘的数据，不会随着进程的结束而清除，读取速度慢于memory cache(2-10ms 硬盘读写的IO操作)
     一般存放css文件

     根据经验情况来看：浏览器的实际处理逻辑是这样的

     首次加载资源 -> 200 -> 关闭标签页
     再次进入 -> 200 from disk cache -> 刷新 -> 200 from memory cache
     （不过好像css都是from disk cache, base64都是from memory cache）

协商缓存（发送请求）

客户端向服务端发送请求时候（没有命中强制缓存），服务端会检查是否有对应的标识，没有则返回200并生成一个新的标识带到header，下次在请求的时候服务端检查到对应的这个标识并做相应的校验，通过则返回304，读取缓存。

• Last-modify / If-modify-since

  浏览器首次请求资源的时候，服务器会返回一个last-Modify到header中. Last-Modify 含义是最后的修改时间。
  当浏览器再次请求的时候，request header会带上 if-Modify-Since，该值为之前返回的 Last-Modify。服务器收到if-Modify-Since后，根据资源的最后修改时间(last-Modify)和该值(if-Modify-Since)进行比较，如果相等的话，则命中缓存，返回304，否则, 则会给出200响应，并且更新Last-Modify为新的值

• Etag / If-none-match（http1.1规范）
  ETag的原理和上面的last-modified是类似的。ETag对当前请求的资源做一个唯一的标识。该标识可以是一个字符串，文件的size,hash等。只要能够合理标识资源的唯一性并能验证是否修改过就可以了。ETag在服务器响应请求的时候，返回当前资源的唯一标识(它是由服务器生成的)。但是只要资源有变化，ETag会重新生成的。浏览器再下一次加载的时候会向服务器发送请求，会将上一次返回的ETag值放到request header 里的 if-None-Match里面去，服务器端只要比较客户端传来的if-None-Match值是否和自己服务器上的ETag是否一致，如果一致说明资源未修改过，因此返回304，如果不一致，说明修改过，因此返回200。并且把新的Etag赋值给if-None-Match来更新该值。

协商缓存两种方式对比

• 在精度上，ETag要优先于 last-modified。

  last-modified这种方式精度差在哪里：
  a. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了
  b. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

• 在性能上，Etag要逊于Last-Modified，Last-Modified需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
• 在优先级上，服务器校验优先考虑Etag。

如何设置index.html不被缓存

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">  <!-- http1.1标准 -->
<meta http-equiv="Pragma" content="no-cache">  <!-- http1.0标准 -->