前端缓存

前端缓存

缓存概述

在计算机领域中，缓存是一项十分重要的技术。

在软件开发，亦或者是在硬件设计开发中，缓存对性能的影响是十分显著的。

学过Java，会知道在Integer的自动装箱中 这个范围中的转换会有些特殊的表现，稍加研究源码，会知道这是因为Integer中的缓存类有关（该缓存类会使用数组存储[-128, 127]范围内的常量）。当然，在实际开发中，可能存在Redis缓存，框架缓存等。

再有，cpu cache可能是最常听到的一种硬件缓存机制了。对于计算机专业的同学来说，cpu cache可能了解的更多些，大致如图，这里就不多表述了：

Expires：资源到期时间，这个时间是服务器的时间，所以这里就会出现一个问题，服务器时间和本地时间不一致。但问题不大，只是这样本地强缓存会失效而已……等等，本地时间和服务器时间不一致并不一定是本地时间超出了指定的到期时间，也有可能是本地时间被修改至到期时间之前，那么这不就使得本地缓存有效了吗不就可能存在本地缓存和服务器资源不一致的问题了/p>

NOTE： 的优先级要比Expires高

如果某天看到HTTP请求头中不包含这两个字段同时也不存在其他缓存设置，是不是就用不到缓存了呢然不是，浏览器自身会实现一个启发式缓存算法，通常是取出响应头中Date和Last-Modified两个字段，计算其差值的10%作为缓存时间：(Date – Last-Modified) * 10%。

2. 协商缓存

根据字面意思，就是前后端进行协商，校验缓存的有效性。

相对来说，这一策略就有很多字段能控制了，不过也很好记，基本都是 这种形式的，而If前缀则表示这个字段是用于判断（验证）的。

ETag：实体标签，服务器资源的唯一标识符，有点像哈希值。
Nginx官方采用的计算方式是“文件最后修改时间的16进制-文件长度的16进制”。
配合If-Match和If-None-Match使用，验证缓存的有效性。

通过If-Match配合Range，我们还可以实现文件的断点续传、文件分段下载、并行下载这些听上去挺高大上的功能，原理很简单，就是请求头通过 请求资源的某一部分，而 可以保证新新范围的请求和前一个请求来自相同的源（ETag不一致，那就说明资源不一致咯）。

Last-Modified：标记请求资源的最后一次修改时间，GMT时间（格林尼治标准时间），由此可知，该字段可以精确到秒级。此外，该字段记录资源最后的修改时间，但是并不会验证资源内容是否真的发生了变化（资源编译打包就会改变该字段的值）。配合If-Modified-Since和If-Unmodified-Since校验缓存的有效性。

NOTE：字段优先级比低。

到这里，我们可以知道缓存的优先级为：

强缓存>协商缓存，
Cache-Control>Expires>ETag>Last-Modified

多数人不对HTTP缓存和浏览器缓存区分的，或者说直接合在一起称为“浏览器HTTP缓存”，还有人直接称之为“前端缓存”，其实都在说同一个内容。

服务器缓存

提到服务器，一般来说都和后端是相关的，但是前端也必须要了解一些相关的知识，因为每次出现问题的时候，都是会在前端页面上显示出来，比如说接口500，这时候，测试就来到了我们身边，俯下身子在我们耳边吟唱死亡颂歌……

当然了，上面说的有些夸大，因为多数时候遇到5xx的问题，测试会直接找到后端排查，若是遇到参数传递的问题，后端才会 告给前端去解决。

CDN缓存

在 DNS缓存 中提到过为了得到IP地址，需要进行一次DNS查询。

在这里，DNS请求获取到的IP地址是服务器的IP地址，对于同一台服务器来说，接收处理的请求越来越多，那么服务器的负载也就越大，服务器对请求的响应可能就会超时。此外，不同地区访问 站的时延是不同的，若服务器在北京，用户在新疆或西藏地区，那么这个访问时延会非常大，用户等待的时间也就越长。

CDN全称是Content Distribute Network，即内容分发 络。在使用了CDN的情况下，上述的两种情况都能得到很好的解决。

CDN理论大致可表述如下：通过在 不同地区 建立 多个 节点服务器，使得用户的请求可以根据其所在地区、当前 络流量、服务器负载、 络连接等因素，被导向最佳的服务器节点。

其适用场景较为广泛，如站点加速，直播，点播等。

讲到这里，就应该对CDN有个模糊的概念：这以前没有CDN的时候，直接请求源站，现在有了CDN，那么请求肯定会被转发到其他服务器，而且这个服务器中的资源可能是一个源站资源的拷贝。咱们可以称这个服务器为 CDN节点 。

CDN缓存是指，存在一个缓存服务器，当浏览器向服务器请求资源时，并不是直接向源站服务器请求，而是被导向CDN边缘节点。在这个边缘节点中缓存了用户的数据以及源站服务器资源，他（边缘cache）负责直接响应最终用户的访问请求，将缓存在本地的内容迅速提供给用户。同时，既然缓存了源站服务器的资源，那么就会涉及到资源的一致性，即保证边缘节点与源站服务器内容同步。

说得简单点，CDN就是一个房产中介，他根据用户的诉求和他掌握的一些信息（如工作地点，交通情况，距离等）为用户提供一个合适的房子。

CDN系统 在功能上可划分为三大模块：分发服务，负载均衡，运营管理。本节所提到的CDN缓存其实只是从属于分发服务的一个小块。本节内容所说的内容只是一个小的范围-CDN分发服务系统中的边缘cache，并不是指代整个CDN系统。

总结

其实还有一种缓存没有提到，这种缓存是用来做离线页面的，而且是直接在HTML中主动使用的——Manifest，使用起来十分简单，只需要一行代码：

但是很多 站并没有使用这种技术，原因在于这个配置的文件上：

1. 如果我们想要缓存页面的所有资源，只能手动将资源写入Manifest声明的配置文件中进行缓存，而不能使用通配符缓存，这太麻烦了。
2. 好不容易把Manifest配置文件写好了，浏览器这边访问起来也很快，这时候， 站的资源更新了，这个缓存会失效吗会的，如果不清除缓存，即使连上 络，资源也不会自动更新，浏览器加载的页面还是旧的页面。我们需要改变配置文件的名字，然后，才会更新本地缓存，通常会增加版本 或者使用hash的命名方式。
3. 解决了这些问题，你又会发现，Manifest在不同设备，不同浏览器上可能存在大小限制。

综上，Manifest的使用还是比较麻烦的，而且用处看上去不大，但是对于一些静态 页，Manifest就显得比较有用了。

此外，还有一些没有提到的缓存技术，如代理服务器缓存，反代理服务器缓存等。