认识浏览器缓存

据SmartBear研究表明，Amazon加载时间每延长1秒一年就会减少16亿美元的营收。那么如何提高网站性能，加速网页呈现速度？今天我们先以浏览器缓存为切入点，学习一下如何利用浏览器缓存，提速我们的WEB应用。

什么是浏览器缓存

浏览器缓存可以理解成为你提供客户端本地副本的服务，使用这个功能，能够减少HTTP请求，提升网页呈现速度。当我们主动告知浏览器，哪些内容需要缓存后，浏览器将会为这些资源创建一个本地副本。下次缓存命中时，就可以调用本地副本而非再次请求服务器获取完整文件了。

如何告知浏览器，我的资源需要被缓存呢？答案就在请求资源的HTTP响应头中。这里我们列一下响应头中设置的与缓存相关的字段：

这四个字段中前两个都是告诉浏览器该资源需要缓存多少时间，在缓存时间中，浏览器将会调用本地副本。在超时后，浏览器将会根据后两个字段值请求服务器效验文件是否一致，一致则返回304。

Cache-Control 与 Expires 同为设置过期时间，在HTTP1.1版本中规定Expires的值在同时设有Cache-Control:max-age时将被覆盖。

ETag比Last-Modified拥有更高的优先级。在一起使用时，服务器会先验证ETag，ETag一致时，才会继续比对Last-Modified，最后决定是否返回304。

在请求的URL相同并且是GET请求的情况下才会触发浏览器的缓存命中机制，命中的资源将会先判断是否过期，过期则进行效验请求。

浏览器在缓存空间所剩无几的情况下，会从中删除最近最少使用的项目。因此，长时间一直没有被使用的缓存项将被清除。这种算法的结果是，清除哪些缓存项完全基于用户行为，难以用可靠的方法进行预测。

我们来查看一个网站的静态JS文件的加载情况：

在使用缓存的情况下，发送效验的请求（304）大小只有完整请求的3%，而在调用缓存副本的情况下，资源是立即得到的（应该有一个小于毫秒级别的时间开销）。相比完整请求资源，使用浏览器缓存在带宽和响应时间上都有着巨大优势。

用户在网页上的不同的操作，会影响到浏览器使用缓存的策略。

可以看出，随着时间的推移，移动端浏览器的缓存空间越来越大。在低版本iOS中，由于完全没有缓存空间的存在，我们也可以选用web storage进行静态内容的存储（每个域5 MB）。