认识浏览器缓存

[YIXUNFE]

认识浏览器缓存

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

什么是浏览器缓存

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

HTTP头的秘密

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

字段名	说明
Cache-Control	指定缓存时间，缓存命中时不会发送请求
Expires	指定过期时间，缓存命中时不会发送请求
ETag	指定文件hash值，缓存命中时会发送请求
Last-Modified	指定文件最后修改时间，缓存命中时会发送请求

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

优先级

• Cache-Control > Expires
• ETag > Last-Modified

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

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

缓存命中

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

浏览器缓存控制

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

性能提升情况

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

url: http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js

HTTP状态	加载时间	请求大小
200	12-30ms	9.5 Kb
304	6-12ms	280 B
200	0ms	from cache

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

用户操作与缓存

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

操作	Cache-Control / Expires	Last-Modified / Etag
地址栏回车	⭕	⭕
页面链接跳转	⭕	⭕
新开窗口	⭕	⭕
前进/后退	⭕	⭕
F5	❌	⭕
Ctrl+F5	❌	❌

其他

移动端浏览器缓存空间

OS	Browser	Size
iOS 4.3	Mobile Safari	0
iOS 5.1.1	Mobile Safari	0
iOS 5.1.1	Chrome for iOS	200 MB +
Android 2.2	Android Browser	4 MB
Android 2.3	Android Browser	4 MB
Android 3.0	Android Browser	20 MB
Android 4.0-4.1	Android Browser	85 MB
Android 4.0-4.1	Chrome for Android	85 MB
Android 4.1	Firefox Beta	75 MB
BlackBerry OS 6	Browser	25 MB
BlackBerry OS 7	Browser	85 MB

数据来自www.guypo.com

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