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

标签: 外文翻译 appcache localStorage 本地存储 浏览器 | 发表时间:2012-09-18 23:06 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2630

原文地址: http://www.stevesouders.com/…/clearing-browser-data/
原文作者:没找到
翻译编辑: 张鑫旭

——–最近较忙,直接进入正题以下为翻译全文——

对于快速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秒,说明图片的缓存被干掉了。

我的测试结果

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

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

  • Chrome 21不清除localStorage. 这个异常结果可能归结于测试结果。 Chrome 21清除localStorage,但是并不在当前选项卡的内存中清除。如果你切换选项卡或者是重启Chrome浏览器,则被清掉了,是从内存中也清掉了。这实际上是一个bug, Chrome 23.0.1259以及后续版本修正了这个问题。
  • Firefox 3.6不清楚磁盘缓存,该问题的出现似乎与Chrome 21约好的:图片已经从磁盘缓存中清掉,但是,内存缓存中还在。按理说,两者都应该被清除掉的,2010的时候,FireFox团队修复了这个 bug.
  • IE 6-7不支持appcache以及localStorage.
  • IE 8-9不支持appcache
  • 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浏览器下数据的清除截图 张鑫旭-鑫空间-鑫生活

IE8的UI通过工具 → Internet选项 → 常规 → 删除…访问,相比IE7其多了个复选框“私人筛选数据”(“InPrivate Filtering data”)(其还有“保留收藏网站数据(Preserve Favorites website data)”项,这个在以后的文章我会讨论的), IE8已经支持localStorage, 不过看样子是清不掉的,因为没有提供相关的复选框,就像FireFox12中清除离线数据一样。
IE8中清除浏览器数据 张鑫旭-鑫空间-鑫生活

IE9的界面又变了,添加了“下载历史”(“Download History”), “私人筛选数据”(“InPrivate Filtering data”)被“ActiveX筛选以及跟踪保护数据”(“ActiveX Filtering and Tracking Protection data”)替换了。类似IE8, localStorage在IE9中是支持的,但是,貌似不能被清除(木有清除的复选框框)~~
IE9浏览器下数据清除的界面效果 张鑫旭-鑫空间-鑫生活

iphone
iPhone(果不其然)有这最简单的清除数据的界面。通过设置 → safari浏览器,我们可以看到一个单按钮:“清除Cookie和数据(Clear Cookies and Data)”。 结果显示,这个可以清除掉cookies, localStorage, appcache, 一级磁盘缓存。在iPhone上很难运行我的测试,因为你要离开浏览器去进行设置,当你回到浏览器的时候,这个页面已经被清除了。为解决这个问题,我在下一个页面键入下面地址进行测试: http://stevesouders.com/tests/clearbrowser/check.php
iphone4上清除Safari浏览器数据的UI

Opera
Opera的删除选项最细化。Opera 12中,访问工具 → 删除私有数据…就会出现一个对话框。关键的复选框是“删除所有Cookie(Delete all cookies)”, “删除全部缓存(Delete entire cache)”, 以及“删除长期存储(Delete persistent storage)”。有很多选择,但都在一个对话框中。
Opera12浏览器中数据清除操作对话框截图 张鑫旭-鑫空间-鑫生活

Safari
Safari 5.0.5下,进入齿轮图标→重设Safari…(windows下),然后,会出现一个有很多选项的对话框,没有“离线数据(offline data)”很明确地表明时无法删除localStorage的。(“清除历史(Clear history)”是没有效果的——当时我只是想看看是否可以把localStorage删掉的)。
Safari 5.0.5下的数据清除

Safari 5.1.7让我有些疑惑。一开始,我选择了Safari → 清空缓存(Empty cache)…(在Mac上),但只影响了磁盘缓存。而后我看到了 Safari → 重设Safari(Reset Safari)… ,但是只有“清除所有网站数据(Remove all website data)”,这个看上去太含糊太宽泛了。再后来,我搜索寻找更多清除选项,然后发现了Safari → 首选项… → 隐私,有一个按钮“清除所有网站数据(Remove all website data)”,这……也太不细分了吧~这个按钮可以成功清除Cookies,本地存储,appcache和磁盘高速缓存。
Mac上Safari5浏览器的数据清除界面 张鑫旭-鑫空间-鑫生活

大测试数据下(众包形式)的结果

下面的结果产生大致这样:作者折腾了一个测试页面,放出来,然后N多同行或莫名被忽悠进来的人点击几个帮助其完成了测试,然后这N多人的测试结果就是下面所要展示的结果。类似于外包中的众包。作者自己无需傻不拉几的一个一个浏览器去测。

下面的 测试结果包含~100个浏览器(webOS, Blackberry, 及RockMelt),我摘录中相同主浏览器下的一些结果(点击下图可查看更详细的表格结果)。
众包测试结果大部分主流浏览器数据摘要

//zxx: 下面几段就是原作者的一些颠来倒去的“废话”了,我就翻译个大致意思……

本实验没杀刻骨铭心,发人深省的提示,因此,数据还算是蛮客观滴。

我个人测试结果和大家的测试结果不同的是iPhone, 估计原因是iPhone清除数据要离开浏览器……然后,什么什么的~~

不同浏览器清除数据的界面的复杂度和缺乏一致性可能导致了这些不太一致的结果,Chrome浏览器21和Firefox 15都有相当数量的测试(154,46),但是,挑落Boss的只有50%或68%。FireFox可能是特例,因为其本地数据存储之前会先询问用户;然后还有Chrome等浏览器有隐私浏览模式~~等

大家测试结果的不同可能与不同浏览器界面不一致有关。应该有跨浏览器的更一致的交互界面。一致的交互界面应该长什么样子呢?像iPhone那样直接一键解决,早死早超生吗?这真的是用户需要的吗?我有时候就想清除磁盘高速缓存,而不想删除Cookie~~ 不过嘛,现在希望所有浏览器都能按照用户所想删除数据是不可能的!

——–以上为翻译全文,虽然不是什么深奥的东西,对于知识拓展还是有一定的帮助的——

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2630

(本篇完)

有话要说,点击 这里发表评论。

相关 [翻译 浏览器 数据] 推荐:

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

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2630. 原文地址: http://www.stevesouders.com/…/clearing-browser-data/. ——–最近较忙,直接进入正题以下为翻译全文——. 对于快速Web APP,缓存四赢得性能的关键.

如何备份/恢复 Chrome 浏览器数据 [Win/Mac/Linux]

- Outman - Chrome迷
很多童鞋在重装系统之前都想要对 Chrome 中的数据进行备份,以能够在重装系统后恢复这些数据. 但是除了一些玩 Chrome 很长时间的用户,鲜有人知道 Chrome 的用户数据到底保存在什么地方. 如果你也有这样的需求,不妨记下下面的这些路径:. 备份方式就不用我说了吧,重装系统之前将目录拷贝出来,重装系统之后再将目录恢复回去就可以了.

数据称现实中谷歌Chrome浏览器速度最快

- 老谢 - cnBeta.COM
技术性能服务提供商Compuware性能测试部门Gomez今天发布数据,按照一个衡量电脑用户使用的网络浏览器速度的项目结果显示,谷歌Chrome浏览器速度最快. 本次项目只测量了在宽带连接下各浏览器的载入时间,数据收集了1个月内访问逾200个网站的18.6亿个独立样本.

数据云同步 傲游浏览器3.1.8正式版发布

- 洞箫 - cnBeta.COM
大家星期四好,今天浏览器专家傲游发布3.1.8的正式版,本次和Beta版相比完善了标签的一个功能,即选择“鼠标右键点击直接关闭标签”时,让大家可以按下 Shift 点击右键打开标签的菜单. 其他新特性包括:新的数据同步功能,锁定标签功能,新的浏览器内部页面等,并大幅提升了极速模式的网页兼容性,为傲游迅雷加速下载加入了批量下载以及升级了Flash插件等.

9月份浏览器市场份额数据

- 建军 - cnBeta.COM
感谢iefans.net的投递. 近日,来自网络监测机构Net Application的最新统计数据表明,9月份,微软IE浏览器的整体市场份额继续下滑. IE市场份额自8月份的55.31%下降至54.39%,其中IE8由30.07%下降至29.91%;IE7由6.29%下降至6.05%.

360浏览器团队发布 Chrome 扩展开发指南中文翻译版本

- Yu - Chrome迷
360浏览器极速版团队最近利用空余时间完成了 Chrome 扩展开发指南的翻译,现托管于360极速浏览器应用开放平台,不得不说这事儿干的实在是非常漂亮,对 Chrome 扩展开发感兴趣的童鞋不用对着天书看了. 希望 360 团队能够持续维护/更新这份文档. 我打开这份文档唯一看的不爽的有两点:. 原文中很多“Chrome”被替换成了“360极速浏览器”.

浏览器市场最新数据解读,IE逐步收复失地

- - 36氪
最新的 数据报告显示,微软的IE浏览器市场份额在2012年的前三个月里都在不断增长,从2月的52.8%增长到三月的53.8%. 看起来IE已经止住去年的颓势,正逐步夺回被侵蚀的市场份额. 与此同时,另外四大浏览器市场份额,与2月相比均有所下降. Firefox由20.9%跌至20.6%;Chrome由18.9%跌至18.6%;Safari由5.2%跌至5.1%;Opera由1.7%跌至1.6%.

JS获取Ip和浏览器信息,用户逗留时间写进数据库

- - ITeye博客
data: "{IP:'" + IP + "',city:'" + city + "',fromURL:'" + fromURL + "',Browse:'" + Browse + "',time:'" + time + "'}",. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

UC浏览器中文版被发现会收集发送用户隐私数据

- - Solidot
加拿大多伦多大学公民实验室调查和比较了中文版UC浏览器和英文版UC浏览器,其中中文版被发现会收集和发送用户的隐私数据,但英文版却没有这么多隐私问题,明显内外有别. UC浏览器号称有5亿注册用户,是全球第四大移动浏览器,仅次于 Chrome、Android浏览器和Safari,每天有1亿活跃用户,它已被阿里巴巴收购.

Silk 浏览器:Google? No!

- 橙子 - 爱范儿 · Beats of Bits
前苹果员工, Blogger Chris Espinosa 指出, Amazon 的 Silk 浏览器技术,让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页,之后再下载到本地. 这样做的结果是, Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.