Web前端的缓存机制（那些以代价换来的效率）

对于Web前端而言，cache可以说是无处不在，通常是2个环节之间，就会引入一个cache做为提升整体效率的角色。例如A和B两者之间的数据交换，为了提升整体的效率，引入角色C，而C被用于当做热点数据的存储，或者是某种中间处理的机制。

也就是我们常常说的“空间换时间”，牺牲一部分代价，来换取整体效率的提升。

那么我们一起来看看前端当中，有那些比较关键的缓存？它们又是怎样协调工作的呢？我们一起来看看哈。

1. 域名转为IP地址（域名服务器DNS缓存）

我们知道url其实只是一个别名，真实的服务器请求地址，实际上是一个IP地址。获得IP地址的方式，就是查询DNS映射表。虽然这是一个非常简单的查询，但如果每次用户访问一个url都去查询DNS一次，未免显得太频繁。DNS会告诉你，你别老是经常过来，万一我挂了，我们就无法愉快地玩耍了。

各个浏览器的缓存时间，会有一定的差别。而在chrome浏览器中查看dns的缓存时间的方式：chrome://net-internals/#dns

因此，浏览器一般会在本地会建立一个DNS缓存，在一段比较长的时间里，都是使用本地的缓存映射。例如，在win7系统的cmd里，可以通过“ipconfig /flushdns ”的方式来刷新本地DNS。

优点：url映射为IP非常快。

成本：消耗一定的浏览器空间来存储映射关系

2. 访问服务器，获取静态内容（地理位置分布式服务CDN）

有同学可能会说，这个CDN不是缓存。其实，CDN的原则就是将离你很远的东西，放在离你很近的地方，通过这种方式提高用户的访问速度。从这个角度，它也可以理解为牺牲空间成本换取了时间，本质上也带有cache的嫌疑，我们权且当做一种特殊的cache吧。

优点：解决用户离服务器太远的时候，网络路由中跳来跳去的严重耗时。

成本：全国各地部署多套静态存储服务，管理成本比较高，发布新文件的时候，需要等待全国节点的更新等。

3. 浏览器本地缓存（无网络交互类型）

在雅虎前端优化的14条原则中，其中一条就是尽量消灭请求，以达到降低服务器压力和提升用户体验的效果。静态文件，例如Js、html、css、图片等内容，很多内容可以1次请求，然后未来就直接访问本地，不再请求web服务器。

常用的实现方法是通过Http协议头中的expire和max-age来控制，这两者的使用方法和区别，我这里就不赘叙了哈。还有一种最近HTML5中很火的，则是localStorage，尤其在移动端也被做为一个强大的缓存，甚至当做一种本地存储来广泛使用。

优点：减少网络传输，加快页面内容展示速度，提升用户体验。

成本：占用客户端的部分内存和磁盘，影响实时性。

4. 浏览器和web服务协议缓存（有网络交互类型）

浏览器的本地缓存是存在过期时间的，一旦过期，就必须重新向服务器请求。这个时候，会有两种情形：

（1）服务器的文件或者内容没有更新，可以继续使用浏览器本地缓存。

（2）服务器的文件或者内容已经更新，需要重新请求，通过网络传输新的文件或者内容。

这里的协商方式也可以通过Http协议来控制，Last-Modified和Etag，这个时候请求服务器，如果是内容没有发生变更的情况，服务器会返回304 Not Modified。这样的话，就不需要每次访问服务器都通过网络传输一个比较大的文件或者数据包，只要简单的http应答就可以达到相同的请求文件效果。

优点：减少频繁的网络大数据包传输，节约带宽，提升用户体验。

成本：增加了的服务器处理的步骤，消耗更多的CPU资源。

5. 浏览器中间代理

上面的几种cache机制，实际上都是非常常见。但是，在移动互联网时代，流量昂贵是很多用户心中的深深的痛。于是，又出现了一种新型的中间chache，也就是在浏览器和web服务器再架设一个中间代理。这个代理服务器会帮助手机浏览器去请求web页面，然后将web页面进行处理和压缩（例如压缩文件和图片），使页面变小，然后再传输给手机端的浏览器。

部分手机浏览器（例如chrome），号称可以节省流量，实际上就是上述做法。但是，也分为两种情况：

（1）用户的网络和手机配置都比较差，因为页面被压缩变小，加载和传输速度变快，并且节约了流量。

（2）用户的网络和手机配置都比较好，本身直连速度已经很快了，反而因为设置了中间代理，加载速度变慢，也可节约流量。

优点：节约用户流量，大部分情况下提升了加载速度。

成本：需要架设中间代理服务器，对各种文件进行压缩，有比较高的服务器维护成本。

6. 预加载缓存机制

这种加载方式也是主要流行在移动端，为了解决手机网速慢和浏览器加载性能的问题，浏览器会判断页面的关联内容，进行“预加载”。也就是说，在用户浏览A页面的时候，就下载并且加载B页面的内容。给用户的体验就是，B页面一瞬间就出现了，中间没有任何延迟的感觉，从而带来更好的极佳的用户体验。

这种实现机制，往往由浏览器来实现，当然，手机页面本身，也可以通过JS来自身实现。而这种机制也存在一些问题，浏览器需要预判用户的浏览行为，在一些场景下，这个预判算法本身不一定准确，如果不准确则带来一定的流量、内存和系统资源的浪费。、

优点：给用户带来极佳的页面展示体验。

缺点：预判实现比较复杂，占据一定的内存和手机系统资源，可能产生流量和资源浪费。

前端的chache当然不仅仅如此简单，如果细致到每一个小环节和组成部分，我们会发现实际上是无处不在的，例如浏览器的渲染行为、网络网卡的传输环节，小环节和小环节之间也有无数这种类型的cache角色。

这个就如同几何分形学中的自相似性：从整体上看符合某种组成规律或者特性，同时，从局部看，仍然符合某种组成的规律或者特性。