浏览器缓存那些事

浏览器读取资源的流程

• 浏览器在加载资源时，根据请求头的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标准 -->