《Web性能实践日志》一2.3 优化策略

2.3 优化策略

既然从localStorage读取数据有一定开销,那么这会怎样影响你如何使用这一技术呢?在下结论之前,我运行了另一个基准测试(http://jsperf .com/localstorage-string- size),以确定从localStorage读取不同大小数据的效果。我们保存4种不同大小的字符串(100个字符、500个汉字、1000个字符和2000个字符)到localStorage中,然后把它们读取出来。结果有点令人惊讶,在所有浏览器中,读取数据量的大小不会影响读取速度的快慢。

我测试了很多次,并恳请我的Twitter粉丝提供更多的信息(https://twitter.com/ slicknet/status/139475625793699840)。可以肯定的是,对于不同的浏览器会有些许差异,但这些差异都不大,并没有实质性的不同。我的结论是:从单一localStorage键值中读取的数据量对速度没有影响。

我又进行了另一个基准测试(http://jsperf.com/localstorage-string-size-retrieval)来检验我的新结论,最好尽可能地减少读取数据的次数。和此前的基准测试结果类似,在大多数浏览器中,读取100个字符10次比一次读取10 000字符慢90%左右。

鉴于此,从localStorage读取数据的最佳策略是使用尽可能少的键值,存储尽可能多的数据。因为读取10个字符和读取2000个字符所需时间大致是相同的,所以你应该尝试把尽可能多的数据保存为一个键值对应的值。每次调用getItem()(或从localStorage读取属性)都会增加时耗,所以一定要确保每次访问读取数据最大化。对于任何一个变量或对象属性,你越快将它读取到内存,后续的所有操作也会越快。

时间: 2024-09-13 12:45:05

《Web性能实践日志》一2.3 优化策略的相关文章

《Web性能实践日志》一导读

序 Web性能实践日志 您手中的这本书收录了大量已发表的 Web 性能相关的文章.其中包括了许多性能相关的主题,如开源工具.缓存.移动网络和应用.自动化.用户体验优化.HTML5.JavaScript.CSS3.指标.ROI和网络协议.这些文章的作者形形色色,有全球最大互联网公司的职员,也有独立顾问.作者们代表至少7家Web性能初创公司:Blaze.Cloud-Flare.Log Normal.Strangeloop.Torbit.Turbobytes和Zoompf.主题和贡献者范围之广令人印象

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

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

《Web性能实践日志》一第1章 WebPageTest内部原理1.1 函数拦截

第1章 WebPageTest内部原理 Web性能实践日志 作者:Patrick Meenan 我想借着今年的这次机会向大家介绍一下WebPageTest是如何从浏览器获取性能数据的.虽然它与Windows下一些工具的技术原理大同小异,但本章介绍的内容并不能代表这些工具的工作原理. 首先,请看图1-1,这张图可以帮助我们从浏览器端理解Windows的网络堆栈. 不管是什么浏览器,只要运行在Windows下,体系结构几乎就如图1-1描述的一样,所有的传输都是通过Windows Socket API

《Web性能实践日志》一2.4 跟进

2.4 跟进 这篇文章一经发表就引发了大量围绕localStorage性能的讨论.讨论最开始出现在Mozilla 的Chris Heilmann的博客文章中,题为"localStorage没有简单的解决方案".在文章中,Chris认为localStorage作为一个整体存在性能问题.在很多博文讨论(其中也包括我的)之后,我最终能够联系上Firefox负责实现localStorage的工程师Jonas Sicking.事实上,localStorage所存在的性能问题并不只是比从对象读取数

《Web性能实践日志》一1.2 代码注入

1.2 代码注入 很幸运,Windows提供了几种向进程中注入任何代码的途径.http://www.codeproject. com/KB/threads/winspy.aspx这里介绍了几种不同方法,当然还有很多其他方法,但是大部分方法这里都有了.有些方法可以把你的代码插入到每一个进程中,但是我想要更有针对性一点的方法,比如仅仅使用我们感兴趣的浏览器作为分析工具.所以经过一些错误尝试后,我最终决定使用CreateRemoteThread/LoadLibrary方法,这个方法基本可以允许你强制任

《Web性能实践日志》一1.3 决定浏览器架构

1.3 决定浏览器架构 现在我们可以拦截任意函数调用了,它变成了一个可以识别指定函数的功能,最好是所有浏览器共用一份代码,这样就可以尽可能多地重用代码了.在WebPageTest中,如果想要拦截所有Winsock调用,我们需要解析主机名,连接套接字以及读写数据(见图1-2). 这赋予了我们访问所有浏览器网络通信的权限,意味着我们完全可以监测浏览器在做什么.除了必须解码原始字节流以外,其他实现都很简单,它还提供了一个跨浏览器的统一度量方式.SSL添加了一点混淆,所以我们也需要拦截浏览器使用各种SS

《Web性能实践日志》一1.4 获取代码

1.4 获取代码 WebPageTest使用BSD协议,所以不论作为什么用途,都欢迎各位重用这里面的代码.项目存放在Google Code上(http://code.google.com/p/webpagetest/),下面还有一些你可能感兴趣的文件. Winsock API拦截代码(http://webpagetest.googlecode.com/svn/trunk/agent/ wpthook/hook_winsock.cc). 代码注入(http://webpagetest.google

《Web性能实践日志》一1.5 浏览器的发展

1.5 浏览器的发展 非常幸运,浏览器已经开始以标准的形式开放更多有趣的信息了,随着W规范的发展,你或者是你最终的用户都可以通过JavaScript直接从浏览器中获取到很多这类信息. 访问http://calendar.perfplanet.com/2011/webpagetest-internals即可评论本章.初次发布于.

《Web性能实践日志》一2.2 这是怎么回事

2.2 这是怎么回事 为了保持跨浏览器会话,localStorage的数据被写入磁盘中.这意味着当你从localStorage中读取数据时,你实际上是从硬盘驱动器上读取这些字节.读写硬盘开销高昂,特别是相对于读写内存来说.从本质上讲,这正是我的基准测试所测试的内容,即从缓存(对象属性)读取数据和从磁盘(localStorage)读取数据的速度比较. 更有趣的是,localStorage按源存储数据,这意味着,在同一时间内,浏览器中的多个标签页可以访问相同的localStorage数据. 这对于那