url输入后的整个流程(4)-http缓存/浏览器缓存

http缓存策略

当客户端第一次请求数据时，此时浏览器不存在缓存数据，须要向服务器请求资源，服务器在返回资源的同时返回缓存策略，http状态码为200，缓存策略存在于响应头里，缓存策略主要有强制缓存和协商(对比)缓存，客户端拿到后将数据和缓存策略缓存到浏览器。

强制缓存

对于强制缓存，服务器响应头会有2个字段来表示，expires/cache-control。

• expire
  expires是一个时间戳，表明资源过时时间。不过该字段是http1.0的，如今浏览器默认使用http1.1，因此基本不用这个字段了，并且过时时间是由服务器生成的，与客户端的时间可能存在偏差，如今使用cache-control代替
• cache-control
  cache-control常见的取值有：
  max-age：缓存的内容将在多少时间后失效；
  no-cache: 会缓存，使用协商缓存策略；
  no-store：因此内容都不会缓存，每次请求都从服务器获取

浏览器第一次响应时将该字段返回给客户端，客户端第二次请求时，根据该字段的取值来决策，若是没有超过max-age的过时时间，则直接从浏览器缓存中取数据，状态码为200,若是超过过时时间或者有no-cache字段，则走协商缓存，若是有no-store字段则直接从服务器获取。

协商缓存

协商缓存是进行比较后决定是否从服务器获取资源。协商缓存的标识字段有Last-Modified/Etag(响应头里),If-Modified-Since/If-None-Match(请求头里)，这4个值之间是两两对应。

• Last-Modified/If-Modified-Since:
  服务器返回的Last-Modified指资源上次被修改的时间，服务器第一次响应时将修改时间放入该字段中，客户端在第二次请求时，会将该值存入到If-Modified-Since字段中发送给服务器，服务器根据该字段的取值来判断资源是否被修改过，例如，服务器第一次响应时资源修改的时间是当天下午3点，客户端在下午5点第二次请求时，告诉服务器我缓存的数据的修改时间是下午3点，服务器判断请求的资源是否在3点到5点之间被修改过，若是没有，则返回304状态码，客户端使用本地缓存，若是修改过则返回状态码200和新的数据。
• Etag/If-None-Match Etag是服务器端生成的，当前请求资源的惟一标识符，客户端第二次请求时将该字段缓存在If-None-Match中发送给服务器，服务器将此字段与惟一标识符对比，若是不相同则资源被修改过，返回新的资源，状态码为200，若是相同则返回状态码304，从缓存中取。
• 为何要设置两个字段Last-Modified和Etag?
  资源修改时间是服务器端生成的，单位是s，若是一个资源在1s内被修改了n次，Last-Modified就会不够精准出现偏差。 Etag和Last-Modified同时出现时，Etag的优先级更高。
  总结：
  第一次请求时：

第二次请求时：

缓存位置

讨论缓存策略的时候老是说从浏览器缓存中取数据，那缓存数据究竟存放在哪里？一度我还觉得是存放在cookie中，就没搞清楚cookie和cache的区别，捂脸。
缓存主要是对静态资源而言，如图片视频等，咱们能够在 Chrome 的开发者工具中，Network -> Size 一列看到一个请求最终的处理方式：若是是大小 (多少 K， 多少 M 等) 就表示是网络请求，不然会列出 from memory cache, from disk cache 和 from ServiceWorker。
它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)Service Worker、Memory Cache、硬盘 Cache、网络请求

• memory cache
  内存中的缓存。按照操做系统的常理：先读内存，再读硬盘。几乎全部的网络请求资源都会被浏览器自动加入到 memory cache 中。可是也正由于数量很大可是浏览器占用的内存不能无限扩大这样两个因素，memory cache 注定只能是个“短时间存储”。常规状况下，浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其余 TAB 腾出位置)。而若是极端状况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭以前，排在前面的缓存就已经失效了。
• disk cache
  也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，所以它是持久存储的，是实际存在于文件系统中的。并且它容许相同的资源在跨会话，甚至跨站点的状况下使用，例如两个站点都使用了同一张图片。disk cache 会严格根据 HTTP头信息中的各种字段来断定哪些资源能够缓存，哪些资源不能够缓存；哪些资源是仍然可用的，哪些资源是过期须要从新请求的。当命中缓存以后，浏览器会从硬盘中读取资源，虽然比起从内存中读取慢了一些，但比起网络请求仍是快了很多的。绝大部分的缓存都来自 disk cache。
• Service Worker 上述的缓存策略以及缓存/读取/失效的动做都是由浏览器内部判断进行的， 咱们只能设置响应头的某些字段来告诉浏览器，而不能本身操做。