译文:清除各个浏览器中的数据研究

摘要:对于快速Web APP,缓存四赢得性能的关键。最近个把月,我做了个所谓“清除浏览器实验”,研究下用户清除缓存的时候会发生哪些奇葩的事情。另外,除了浏览器的磁盘缓存(指图片啊等数据),我还折腾了其他一些数据格式,如:cookies, localStorage, 以及 application cache. indexedDB并不在其中,因为貌似其要嗝屁了。

对于快速Web APP,缓存四赢得性能的关键。最近个把月,我做了个所谓“清除浏览器实验”,研究下用户清除缓存的时候会发生哪些奇葩的事情。另外,除了浏览器的磁盘缓存(指图片啊等数据),我还折腾了其他一些数据格式,如:cookies, localStorage, 以及 application cache. indexedDB并不在其中,因为貌似其要嗝屁了。

实验的准备与操作(大致看看)

该测试从Save Stuff这个页面开始。该页面做了4件事情:

1.设置了一个叫做”cachetest”的永久Cookie, JavaScript创建;

2.测试window.localStorage以确定是否支持本地存储。如果支持,将会看到一个关键字为”cachetest”的本地存储值;

3.测试window.applicationCache以确定是否支持应用程序缓存 – appcache(Application Cache – 可用来实现离线应用)。如果支持,会使用appcache加载一个iframe. 该iframe的manifest文件有个包含“iframe404.js iframe.js”的备份片段。因为iframe404.js是不存在的,appcache会加载iframe.js(定义了全局变量iframejsNow)代替之。

4.加载一个需要5秒返回的图片,并缓存30天。

OK,现在数据已经保存到浏览器中了,然后用户根据系统提示清除浏览器数据,然后去检查缓存页面去查看之前保存的数据项还在不在。

1.查找名叫”cachetest”的Cookie;

2.检查关键字为”cachetest”本地存储数据;

3.再次加载iframe, 通过iframe的onload事件处理,检查iframejsNow是否被定义,以确定appcache是否被清掉了;

4.加载同样那个要超过5秒的图片,如果这回图片加载的时间多于5秒,说明图片的缓存被干掉了。

我的测试结果

浏览器数据缓存清除的结果 张鑫旭-鑫空间-鑫生活

上图所示结果虽然不尽相同,但是跟我预想的很接近,然后其他一些知识碎片:

1.Chrome 21不清除localStorage. 这个异常结果可能归结于测试结果。 Chrome 21清除localStorage,但是并不在当前选项卡的内存中清除。如果你切换选项卡或者是重启Chrome浏览器,则被清掉了,是从内存中也清掉了。这实际上是一个bug, Chrome 23.0.1259以及后续版本修正了这个问题。

2.Firefox 3.6不清楚磁盘缓存,该问题的出现似乎与Chrome 21约好的:图片已经从磁盘缓存中清掉,但是,内存缓存中还在。按理说,两者都应该被清除掉的,2010的时候,FireFox团队修复了这个bug。

3.IE 6-7不支持appcache以及localStorage。

4.IE 8-9不支持appcache。

5.Firefox 3.6, IE 8-9, and Safari 5.0.5不清除localStorage, 我猜想,出现这个问题的原因是浏览器没有连接这些本地存储的界面。可参考下面展示的浏览器界面。

浏览器的交互界面们

在查看广泛数据下的结果前,有必要先看看各个浏览器清除数据的界面是怎样的,包含哪些清除的选项。下面截图来自Mac或window, 因此,可能和你自己看到的是有一些差异的。

Chrome

点击扳手图标 → 历史 → 清除所有浏览数据…Chrome 21浏览器下如下显示。复选”Empty the cache”(“清空缓存”)清除磁盘缓存,”Delete cookies and other site and plug-in data”(“删cookie以及其他站点和插件数据”)清除cookies, localStorage, 及appcache.

Chrome21浏览器下清除数据的操作界面 张鑫旭-鑫空间-鑫生活

Firefox

清除Firefox 3.6点击工具 → 清除最近历史…然后复选Cookie和Cache. 没有清除localStorage的复选框。

FireFox3.6浏览器下的数据清除  张鑫旭-鑫空间-鑫生活

FireFox12通过新增离线站点数据(Offline Website Data)这个复选项修复了这个问题。Firefox 15 有同样选择。结果localStorage被成功清掉了!

FireFox12浏览器下的数据清除(含离线站点数据)

Internet Explorer

IE6下可能要折腾点。点击工具 → internet选项… → 两个按钮:删除Cookie…(Delete Cookies…)和删除文件…(Delete Files…)。 两个按钮都需要确认是否选择并删除。这里有个“删除所有离线内容”(“Delete all offline content”)选项,但因为appcache和localStorage不支持,对于本实验而言纯属打酱油的。

IE6浏览器下浏览数据的清除 张鑫旭-鑫空间-鑫生活

清除IE7则点击工具 → 删除浏览历史…仍然是两个分离的按钮,删除文件(deleting files)和删除cookie(deleting cookies), 同样有个“删除所有…”按钮,可以一键搞定everything~~

IE7浏览器下数据的清除截图 张鑫旭-鑫空间-鑫生活