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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 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)。可以看出,结果仍然如此,几乎到了滑稽的程度,这是为什么呢?

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
13天前
|
机器学习/深度学习 JavaScript 前端开发
深入探索WebAssembly:提升Web应用的性能
【10月更文挑战第15天】深入探索WebAssembly:提升Web应用的性能
31 3
|
22天前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
74 5
|
22天前
|
机器学习/深度学习 人工智能 监控
提升软件质量的关键路径:高效测试策略与实践在软件开发的宇宙中,每一行代码都如同星辰般璀璨,而将这些星辰编织成星系的过程,则依赖于严谨而高效的测试策略。本文将引领读者探索软件测试的奥秘,揭示如何通过精心设计的测试方案,不仅提升软件的性能与稳定性,还能加速产品上市的步伐,最终实现质量与效率的双重飞跃。
在软件工程的浩瀚星海中,测试不仅是发现缺陷的放大镜,更是保障软件质量的坚固防线。本文旨在探讨一种高效且创新的软件测试策略框架,它融合了传统方法的精髓与现代技术的突破,旨在为软件开发团队提供一套系统化、可执行性强的测试指引。我们将从测试规划的起点出发,沿着测试设计、执行、反馈再到持续优化的轨迹,逐步展开论述。每一步都强调实用性与前瞻性相结合,确保测试活动能够紧跟软件开发的步伐,及时适应变化,有效应对各种挑战。
|
21天前
|
Java Shell
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
「sh脚步模版自取」测试线排查的三个脚本:启动、停止、重启、日志保存
35 1
|
23天前
|
XML JSON Java
Logback 与 log4j2 性能对比:谁才是日志框架的性能王者?
【10月更文挑战第5天】在Java开发中,日志框架是不可或缺的工具,它们帮助我们记录系统运行时的信息、警告和错误,对于开发人员来说至关重要。在众多日志框架中,Logback和log4j2以其卓越的性能和丰富的功能脱颖而出,成为开发者们的首选。本文将深入探讨Logback与log4j2在性能方面的对比,通过详细的分析和实例,帮助大家理解两者之间的性能差异,以便在实际项目中做出更明智的选择。
148 3
|
19天前
|
监控 测试技术 PHP
性能和压力测试
【10月更文挑战第10天】性能和压力测试
108 60
|
21天前
|
Java 程序员 应用服务中间件
「测试线排查的一些经验-中篇」&& 调试日志实战
「测试线排查的一些经验-中篇」&& 调试日志实战
18 1
「测试线排查的一些经验-中篇」&& 调试日志实战
|
11天前
|
开发框架 自然语言处理 PHP
PHP在Web开发中的持久魅力与创新实践###
【10月更文挑战第17天】 本文探讨了PHP作为一门老牌却充满活力的编程语言,在现代Web开发中的独特优势和未来趋势。通过分析其简洁性、灵活性、强大生态系统及不断创新的特性,本文旨在揭示PHP为何能持续吸引开发者,并在技术快速迭代的时代保持竞争力。同时,文章也展望了PHP在未来Web开发领域的发展潜力,强调其在技术创新和社区支持下,依然能够引领Web开发的新潮流。 ###
21 9
|
5天前
|
SQL 安全 Go
PHP在Web开发中的安全实践与防范措施###
【10月更文挑战第22天】 本文深入探讨了PHP在Web开发中面临的主要安全挑战,包括SQL注入、XSS攻击、CSRF攻击及文件包含漏洞等,并详细阐述了针对这些风险的有效防范策略。通过具体案例分析,揭示了安全编码的重要性,以及如何结合PHP特性与最佳实践来加固Web应用的安全性。全文旨在为开发者提供实用的安全指南,帮助构建更加安全可靠的PHP Web应用。 ###
16 1
|
10天前
|
机器学习/深度学习 缓存 监控
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。