Web App运行速度慢的原因

SunSpider基准测试表明,现在移动Web应用的运行速度普遍较慢(如图1所示)。 基本上,人们对于SunSpider基准测试的态度主要有以下三类。

JavaScript比原生代码慢已不是什么新闻,现在的问题是,JavaScript在某些方面有点慢,对于你正在编写的软件类型是否至关重要。

JavaScript的运行速度对程序确实有所影响,但它正变得越来越快,总会有一天会甩掉“慢”的帽子。

我用Python/PHP/Ruby来编写服务器端代码,我的服务器比你们的移动设备运行速度快。但假如我用解释型语言可以很好地支持上千个左右的用户,你们肯定能想出使用高性能的JIT语言支持单个用户的方法吗?这样做的难度有多大?

图1  JavaScript程序在不同浏览器上的运行速度

在本篇文章中,我会做一个大胆的尝试——反驳上述的三个观点。JavaScript运行起来的确很慢,而且将来也没有变快的倾向;在服务器端编程的经验看似很牛,但当你试图思考移动应用的性能时,却使你无法“从小处着眼”。此外,在谈及JavaScript的文章中,很少有人真正量化它到底有多慢,或提供一套评判标准。为了纠正这一点,我会为JavaScript的性能提供三个当量,让大家对它有一个直观的认知。

与原生程序的性能进行相比,JS的表现究竟如何?

为了回答这个问题,我从Benchmarks Game中任意选取了一个基准测试。然后,找了一个很老的执行这个测试的C语言程序。我用iPhone 4S对LLVM(底层虚拟机)和Nitro进行对比测试。测试中,LLVM的速度始终是Nitro的4.5倍(如图2所示)。

由于现实中运行的代码都是任意的,所以这类实验才很有价值,你也不妨亲自做一做这样的实验。如果你好奇“如果CPU绑定函数不在Nitro JS中,而是放在原生代码中,速度会快多少”,我的回答是快5倍左右。这个答案与Benchmarks Game测试x86/GCC/V8的结果大体一致(GCC/x86一般比V8/x86快2~9倍)。

图2  LLVM与Nitro对比测试的结果

只有原生代码1/5的表现,是否能满足所有人?

密集型CPU是如何渲染电子表格的?其实没那么难。问题是,ARM不是x86。根据GeekBench的测试结果显示,最新的MBP与最新的iPhone相比,全系数差异为10,所以电子表格的渲染是没什么问题的。但文字处理的情况又怎么样呢?我们难道不能像在m68k(摩托罗拉68000的CPU)上那样,通过在其后面绑定一个协同处理器来操作吗?你也许忘了,Google Docs的实时协作功能,其实不是它的一种特性,这项功能是在2010年4月大规模改写时添加进来的。有了这项功能,iPhone 4S相对于Web浏览器完全没有竞争力。

让我们再来看看另一个重要的JavaScript应用程序——Google Wave。Google Wave从来不支持 IE8,因为IE8太慢了。所有受支持Google Wave的浏览器(Gogle Chrome、Safari 4、Firefox)的基准测试结果都低于1000毫秒。而iPhone的基准测试结果是2400毫秒,因此,它无法运行Google Wave。这里要说明一点:实时协作可以在移动设备上执行,却不可以用JavaScript执行。原生应用和Web应用之间的性能差距与FireFox和IE8之间的性能差距相当,对于重要的工作来说,这个差距相当大了。

本栏目更多精彩内容:http://www.bianceng.cn/webkf/tools/

时间: 2024-10-31 08:04:28

Web App运行速度慢的原因的相关文章

Web App设计浅谈

HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主. 本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web app? Web app是一种通过网

web app 自适应方案总结 关键字 弹性布局之rem

现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox        使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局         使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示. 因为em是相对父级元素的原因 没有得到推广. 二. 流式布局(Fluid)          使用 % 百分比定义宽度,高度

Web app设计细节:web app互动设计技巧

文章描述:Web app设计浅谈 . HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web

web app 自适应方案总结

  现在移动端 web app 的自适应布局的方案有 5种. 一. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 二. 弹性布局 使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示. 因为em是相对父级元素的原因 没有得到推广. 三. 流式布局(Fluid) 使用 % 百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (v

部署Python的框架下的web app的详细教程

  这篇文章主要介绍了Python部署web app的详细教程,示例代码基于Python2.x版本,需要的朋友可以参考下 作为一个合格的开发者,在本地环境下完成开发还远远不够,我们需要把Web App部署到远程服务器上,这样,广大用户才能访问到网站. 很多做开发的同学把部署这件事情看成是运维同学的工作,这种看法是完全错误的.首先,最近流行DevOps理念,就是说,开发和运维要变成一个整体.其次,运维的难度,其实跟开发质量有很大的关系.代码写得垃圾,运维再好也架不住天天挂掉.最后,DevOps理念

我想请教各位大神,web app是什么?有哪些参考的案例?

问题描述 我想请教各位大神,web app是什么?有哪些参考的案例? 我想请教各位大神,web app是什么?有哪些参考的案例?跪求指导,,,,, 解决方案 web app不是什么,而是指,用html5等技术而不是原生的方式开发的应用.其实就是一个专门为移动设备设计的网站,主要来说是界面的适配. 后端和开发网站其实是一回事.你需要学的是css html js等前端技术和框架,以及一种后端语言,比如asp.net jsp node.js php等. 解决方案二: Web app是一种通过网络(如互

百纳信息CTO刘铁锋:Web App在移动设备上的发展趋势

11月4日,开放平台与技术主题论坛,第一场的讲师是百纳信息CTO刘铁锋,针对当前业界非常关注的Mobile Web技术发展前景,刘铁锋回顾了移动浏览器的发展脉络,从2005年Palm手机浏览器到Nokia手机浏览器.MIT.航海家.再到Opera,以及后面的Android和iPhone上的浏览器,他将手机浏览器分为三个阶段:WAP浏览器>牺牲浏览器体验的手机浏览器>以Android和iPhone浏览器为代表的智能手机浏览器.整个浏览器的发展趋势是体验越来越好,移动浏览器的未来体验会更胜于PC浏

远程调试 Azure Web App

当我们将 Web App 部署在 Azure 上时,如果能够实现远程调试,将会极大的提高我们修复 bug 的效率.Visual Studio 一贯以功能强大.易用著称,当然可以实现基于 Azure 应用的创建.发布和调试.接下来就让我们一起看看如何使用 Visual Studio 远程调试部署在 Azure 上的 Web App,以及一些常见的注意事项.   注意工具的版本 在开始正文前让我们先检查一下使用的 Azure SDK 版本和 Visual Studio 版本.根据MSDN的介绍,Az

WEB设计技巧:Web开发中经常使用的网站和Web App

文章描述:Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. CodeVisually是一个开源项目.在它的分类目录下有各种插件.