开发者社区> 异步社区> 正文

《Web性能实践日志》一第2章 localStorage读取性能2.1 基准测试

简介:
+关注继续查看

本节书摘来自异步社区《Web性能实践日志》一书中的第2章,第2.1节,作者【加拿大】Stoyan Stefanov,更多章节内容可以访问云栖社区“异步社区”公众号查看

第2章 localStorage读取性能

Web性能实践日志
作者:Nicholas Zakas

在Web开发人员使用的工具中,Web Storage(http://dev.w3.org/html5/webstorage/)迅速成为了HTML5新增的最受欢迎的功能。具体来说,localStorage提供了快速简单的客户端数据存储功能,可以跨多个会话存储数据,这使得localStorage在世界各地Web开发人员中被广为应用。通过使用简单的键值接口,我们看到很多网站以各种独特而有趣的方式应用localStorage这一技术。

Disqus(http://www.disqus.com/),是一个非常流行的反馈管理系统。它使用localStorage来实时保存您正在输入的评论。因此,即使有可怕的意外发生,你也可以重启浏览器,从出现问题之前的地方继续。
谷歌(http://www.google.com/)和Bing(http://www.bing.com/)用localStorage存储JavaScript和CSS,来改善他们的移动网站性能。
在我了解的案例中,Google/Bing的这种方式似乎越来越受人们的欢迎。部分原因是由于HTML5 application cache使用困难,部分原因是该技术得到了Steve Souders和其他人的青睐。事实上,随着我越来越多地和人们提及localStorage以及用它来存储UI相关信息是多么的有用,我发现更多人开始尝试这种技术。

我发现一个令人费解的现象,人们在使用localstorage时有一个内定不成文的假设:从localStorage读取数据开销不大。我曾经从其他开发者那里听到传言说遇到异常的性能问题,所以我设计了一个实验来量化localStorage的性能特点,以确定用它读取数据的实际成本。

2.1 基准测试

不久前,我创建并共享了一个简单的基准测试,来测量从localStorage取值和从一个对象属性取值的性能。有人基于这个测试做了改良,并开发了更可靠的版本(http://jsperf.com/localstorage-vs-objects/10)。最终结果是:每个浏览器中,从localStorage读取数据比从对象属性中读取相同数据慢几个数量级。到底有多慢呢?请看图2-1所示(数字越高越好)。


0f4ce39723948133796d15388c3d776cef37c968

看了这个图后,你可能会感到困惑,因为它似乎没有展示出从localStorage中读取数据的结果。事实上它被展现出来了,你看不到它的原因是这一数字实在太小,在图示比例上甚至不可见。除了Safari 5可以显示实际的localStorage的读取数据结果,所有其他浏览器的巨大差异使得你根本不可能在这张图上看到实际数据。当我调整y轴的值后,你才可以看到不同浏览器中的测量结果。

通过改变y轴的比例,现在你可以看到从local Storage和从对象属性读取数据的真实对比(见图2-2)。可以看出,结果仍然如此,几乎到了滑稽的程度,这是为什么呢?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
走进JavaWeb技术世界9:Java日志系统的诞生与发展
本文出自我的公众号:程序员江湖。 满满干货,关注就送。   一个著名的日志系统是怎么设计出来的? 1前言 Java帝国在诞生之初就提供了集合、线程、IO、网络等常用功能,从C和C++领地那里吸引了大量程序员过来加盟,但是却有意无意地忽略了一个重要的功能: 输出日志。
2515 0
Web 性能测试-内存泄漏测试方法之chrome内存快照
首先明确一下我们测试的目的:客户端浏览器的js内存是否存在泄漏,服务器端的话可不是这么测,防止用户使用时浏览器卡顿或崩溃。
75 0
Webpack 2 视频教程 005 - Webpack 编译输出日志
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的。
996 0
三种web性能压力测试工具http_load webbench ab小结
题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种http_load下载地址:http://www.acme.com/software/http_load/http_load-12mar2006.tar.gz程序非常小,解压后也不到100K 居家旅行 携带方便 呵呵http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载。
888 0
Linux性能测试 /proc目录
/proc文件系统 - 各种内核信息/proc目录下文件提供了很多不同硬件设备和内核的详细信息。更多详情参见Linux kernel /proc。一般/proc例如: [root@SM155 proc]# cat /proc/cpuinfo processor : 0 vend...
636 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载