前端客户端缓存相关的总结

这里主要记录在平常中对知识的学习，经过结合笔记与自身理解的方式尝试写下总结
文章对细节可能不会一一介绍解释，内容仅做参考
复制代码

前些日子在面试的时候被问到有关前端优化的，其中回答了利用前端缓存，接着就被追问有关缓存的一些问题，但回答得不是很好，有必要再整理理解一下。因为目前只查阅了有关客户端缓存相关的知识，因此接下来内容都是围绕着它来说。固然了，其余方式的缓存也是要学习的

1、缓存的分类

平时中通常说的都是客户端缓存，固然啦，还有其余类别的。此处提供了解：

• CDN缓存
• DNS缓存
• 客户端缓存
• Service Worker与缓存及离线缓存
• PageCache与ajax缓存

2、缓存的做用

使用缓存有以下优化：

• 减小冗余的数据传输
• 节省网络费用，缓解网络瓶颈问题
• 下降对原始服务器的要求，服务器能够更快响应，避免出现过载

缓存有时候也可能会带来不想要的结果，好比使用了缓存的数据致使没法实时呈现效果
也不能说是好坏，能够当成一个工具，想发挥什么样的做用，关键是看咱们怎么使用它

3、客户端缓存

客户端缓存方式主要分为强缓存和协商缓存两种

• 强缓存：将资源缓存到本地。再次请求时，直接使用本地的缓存(不用跟服务器进行通讯)
• 协商缓存：缓存资源到本地并保存该资源的缓存信息。再次请求时，将资源相关信息返回给服务器，让服务器判断浏览器是否能直接使用本地缓存(整个过程至少与服务器通讯一次)
  • 若是能，直接使用本地的缓存
  • 若是不能，再次请求服务器获取最新的资源

客户端缓存操做过程以下：

1.浏览器首次请求资源：

• 本地无资源，向服务器获取对应数据
• 在获取到资源后，会根据 响应的header内容 来决定缓存该资源的方式(是否缓存，要缓存的话是使用强缓存仍是协商缓存)

2.浏览器后续请求资源：

• 先获取该资源缓存的header信息，判断是否命中缓存(根据cache-control和expires信息判断)，若命中，直接从缓存中获取资源信息，包括缓存header信息。本次请求不会与服务器进行通讯 (强缓存)
• 若是没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否缓存命中，若命中则服务器返回新的响应header信息更新缓存中的对应header信息，可是并不返回资源内容，它会告知浏览器能够直接从缓存获取 (协商缓存)
• 不然从服务器获取最新的资源内容

能够用图来更具体地说明一下：

浏览器首次请求资源

浏览器后续请求资源

4、强缓存

与强缓存主要相关的header字段有expires和cache-control：max-age=number。而且若是cache-control与expires同时存在的话，cache-control的优先级高于expires

• expires：这是http1.0时的规范，它的值为一个绝对时间的GMT格式的时间字符串，如Tue May 14 2019 00:00:10 GMT，若是获取时间在expires以前，本地缓存有效，反之过时
• cache-control：max-age=number：这是http1.1时出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个时间相对值。资源第一次的请求时间和Cache-Control设定的有效期时间，计算出一个资源过时时间。经过这个过时时间跟当前的请求时间比较，若是请求时间在过时时间以前，本地缓存有效，反之过时。cache-control除了该字段外，还有下面几个比较经常使用的设置值：
  • 1）no-cache：不使用本地缓存
  • 2）no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源
  • 3）public：能够被全部的用户缓存，包括终端用户和CDN等中间代理服务器
  • 4）private：只能被终端用户的浏览器缓存，不容许CDN等中继缓存服务器对其缓存

5、协商缓存

与协商缓存相关的header字段有Last-Modified/If-Modified-Since和Etag/If-None-Match
协商缓存是由服务器来肯定缓存资源是否可用的，因此客户端与服务器端要经过某种标识来进行通讯，从而让服务器判断请求资源是否能够缓存访问，这主要涉及到上面两组header字段，这两组搭档都是成对出现的
即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），若响应头没有Last-Modified或者Etag字段，则请求头也不会有对应的字段

• Last-Modified/If-Modified-Since： 两者的值都是GMT格式的时间字符串，具体过程：
  • 1）浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间
  • 2）浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值
  • 3）服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，若是没有变化则返回304 Not Modified，可是不会返回资源内容；若是有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，由于既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header
  • 4）浏览器收到304的响应后，就会从缓存中加载资源
  • 5）若是协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在从新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值
• Etag/If-None-Match： 这两个值是由服务器生成的每一个资源的惟一标识字符串，当资源有变化时，这个值就会改变；其判断过程与Last-Modified/If-Modified-Since相似，与Last-Modified不同的是，当服务器返回304 Not Modified的响应时，因为ETag从新生成过，response header中还会把这个ETag返回，即便这个ETag跟以前的没有变化

Last-Modified和Etag的区别 在描述中对于Last-Modified和Etag的使用能够说是差很少的，可是，Etag(http1.1)的出现是为了解决几个Last-Modified比较难解决的问题：

• 一些文件也许会周期性的更改，可是他的内容并不改变(仅仅改变的修改时间)，这个时候咱们并不但愿客户端认为这个文件被修改了，而从新GET
• 某些文件修改很是频繁，好比在秒如下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改没法判断(或者说UNIX记录MTIME只能精确到秒)
• 某些服务器不能精确的获得文件的最后修改时间 这时，利用Etag可以更加准确的控制缓存，由于Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的惟一标识符

Last-Modified与ETag是能够一块儿使用的，服务器会优先验证ETag，一致的状况下，才会继续比对Last-Modified，最后才决定是否返回304

6、强缓存和协商缓存的区别

7、缓存位置

缓存的位置大体分为如下三类：Service Worker，Memory Cache，Disk Cache 而且它们的优先级就是按照这个顺序，从前日后寻找，找到即返回；找不到则继续。若最后资源在这些地方都没有找到的话，再去服务器请求资源

• service worker
  用户自定义缓存哪些资源到硬盘上，什么状况下使用缓存（路由匹配规则），缓存匹配并返回
  清空缓存的状况分两种：一是手动调用api，二是容量超过限制，被浏览器清除
  这种方式缓存的资源查看方式：开发者工具 -> Application -> Cache Storage
  当资源请求被发起的时候，浏览器首先从service worker中查找资源，若是缓存为命中，通常状况会使用fetch（）方法继续获取资源，这时浏览器就去memory cache 或disk cache中进行下一次找缓存的工做
  特别注意：通过fetch（）方法获取的资源，都会显示 from ServiceWorker，无论资源实际状况是从memory cache 或disk cache，仍是从网络从新请求获取的

• memory cache
  内存中的缓存，几乎全部的网络请求资源都会被浏览器自动加入到memory cache中，被短时间存储，关闭浏览器窗口后memory cache就失效了
  从memory cache中获取缓存内容的时候，浏览器会忽视例如max-age=0，no-cache等头部配置
  但若是头部配置设置了no-store，那么资源就不会进入memory-cache

• disk cache
  硬盘上的缓存，持久存储，容许相同资源跨回话跨站点的使用
  严格根据HTTP头部字段断定该缓存哪些资源，哪些资源可用，以及哪些资源过时了须要从新请求
  当请求命中缓存时，就从硬盘中读取资源。绝大多数的缓存都来自disk cache

查询咨询来源：

• Chrome开发工具 -> network -> 查看size那一列的值

• xxk：网络请求

• form memory cache

• disk cache

• from ServiceWorker

8、不缓存的方式

1. meta设置

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">
复制代码

2. ajax请求中的请求头加入取消缓存设置

If-Modified-Since: 0
Cache-Control: no-cache
复制代码

3. ajax请求url后加入随机数或时间戳参数

url + ? ran = Math.random()/new Date().getTime()
复制代码

4. 后端返回响应头相关参数设置