OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember


分享到
分类 心得体会   关键字 JavaScript   发布 ourjs  1419255414362
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 很多人对AngularJS框架的性能有所怀疑,尤其是移动端的性能,此文为对目前主流前端MVC框架的评测比较。

在Filament集团,我们一直非常专注于网站性能。我们一直对主流的的JavaScript MVC框架,如Angular,Backbone和Ember的性能很好奇,主要是因为它们能够优雅地解决复杂的问题,我们希望能够使用他们为我们的客户服务。使用这些框架来保证性能和提高开发速度,但下载、解析和执行JavaScript是一个相当大的性能瓶颈,特别是当JavaScript用于产生该站点的HTML内容时。

速度很重要


作为业内人士,我们都知道网站的页面加载速度(PLT时间),是评价性能的关键指标。在一项研究中 ,47%的用户,希望网页在两秒钟内加载完成,57%的用户表示,他们会放弃需要3秒以上时间加载的网页。谷歌甚至将网页的加载速度作为其搜索排名的一个因素。 

在一个快速可靠的无线网络中,页面等待的时间往往非常短。但浏览器端的用户到底关心什么?

统计数据显示(来自GSMA),只有20%的北美客户有LTE(4G)功能的手机。从全球来看,LTE普及率约为5%。 3G网络仍是常态,

不过移动设备往往在解析和执行的JavaScript方面非常缓慢。谷歌甚至建议我们,网站应该在一秒钟内呈现:这些流行的MVC框架能够提供吗?

初始加载时间很重要


最小的硬件或网络的需求,就能迅速地呈现页面是良好设计体现的一个方面。当然,最初的加载时间(您第一次访问一个网站时所需要的加载时间)可以说是更重要的,特别是在通过社交媒体共享链接的时代:没有一个成功的初次访问,就没有后续的访问。

我们想要找到一种比较方法,不仅仅是看的文件大小来评价这些框架的初始加载时间。

搭建测试环境


幸运的是,TodoMVC项目具有完全相同的测试用例,基于大范围流行的JavaScript MVC框架实现。这为我们提供了一个级小的,测试应用程序:没有第二次加载,资源很小和最少的逻辑。

该TodoMVC的例子不是“生产环境”下的,因为他们只是为了表现同一个应用在不同框架下是如何构建的。为了接近一个真实的生产环境中,我们修改了TodoMVC代码示例,将文件压缩合并与最小化(minification),以及将服务器迁到接近测试地点的一个地方。

我们跑了一下 WebPageTest.org 和  Andy Davies的批量测试的表格。 我们做了20次浏览器连接的测试,去除极端值。我们测试了有线连接下的桌面浏览器(Chrome浏览器)和移动浏览器(Android的浏览器),无论是在3G和桌面环境下。两个桌面版本让我们有机会看到的相同的浏览器受不同的网络状况的影响; Nexus 5个给了我们一个现代3G Android手机具有的连接体验。

测试


采集了所有的数字,我们最感兴趣的渲染开始了。下图为Todo应用程序的UI首次出现的WebPageTest所需时间。这也是一个用户可以最早使用的点。换句话说,渲染开始时间之前,访客会一直盯着一个空白屏幕。下图为 Ember,在 Nexus 5 手机的 3G:环境下的模拟视图:




题外话


弄清楚什么可以测什么不能测非常重要。

首先,这些试验的目的是为每个框架建立一个合理体现渲染时间的“最佳情况”,在三种不同的网络/设备条件下进行测试。Chrome(我们用于测试的浏览器),是世界上最快,最符合标准的浏览器之一,还有一个非常简单的TodoMVC的功能,它不太可能有更丰富的功能。所以,如果这里的结果看起来比较慢,那么更复杂的应用程序可能会更慢。


其次,这些测试不是渲染架构之间的启动时间进行了比较。使用一个应用程序给定的框架测出的低渲染时间,并不意味着该框架建立的所有应用程序渲染的都比较快。例如,它可能是通过利用在Angular和Ember的复杂性抽象,降低整体代码大小。

结果



通过检查这些数据,它呈现出几下:
Ember在Nexus5的3G环境下需要约5秒钟,桌面Chrome在3G下平均需要3秒。
Angular在Nexus5的3G环境下平均需要4秒,3G桌面浏览器需要3秒左右。
Backbone似乎在所有连接下的性能都是最好的。
看的Nexus5和桌面程序在同样的3G网络下的差异表明,Angular和Ember初始页面渲染对机器性能有较高的要求。

平均初的渲染时间:






结论


我们鼓励你看看测试代码和数据然后自己做出判断。不过要强调的是,如果你只看重页面加载时间,那么现在的很多工具可能都不能用了。

但是,我们有理由相信,这一点在将来肯定会有所提高。


相关文章:

我们不需要JavaScript框架
Angular.JS出了什么问题?
保卫AngularJS 

没必要害怕Angular.Js


原文地址: 点此
社区评论 ( Beta版 )
  • #0 己删除 1419346350257
  • #1 云吓而 1419395682121

    Backbone更适合做移动应用,但是由于简单,进行实际产品开发的时候,可能会更多的工作量。

  • #2 己删除 1419473493451
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2015年的JavaScript:Angular之类的框架将被库取代
  2. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  3. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  4. HTML5的TCP和UDP Web Socket API草案定稿
  5. 为什么io.js要从Node.js中分裂出来?
  6. JavaScript代码组织结构良好的5个特点[reuqire.js]
  7. 避免Node.js中的命令行注入安全漏洞
  8. 在JavaScript的Array数组中调用一组Function方法
  9. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  10. io.js新图标logo征集中
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. [译]Node.js 框架比较: Express vs. Koa vs. Hapi
  2. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  3. 保卫AngularJS
  4. Angular.JS出了什么问题?
  5. 我们不需要JavaScript框架
  6. 各大邮件群发/订阅代理服务商比较
  7. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)
  8. CTO这点事
  9. Bootstrap vs Foundation如何选择靠谱前端框架
  10. CSS垂直水平完全居中手册

 关键字 - JavaScript
  1. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  2. 可视化Web报表OnceVI中用户输入表单验证与提交
  3. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  4. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  5. AngularJS在大型单页面应用中的性能优化(二)
  6. JavaScript中的继承,构造函数以及new关键字的作用
  7. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  8. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  9. 7个最新的实用性 JavaScript MV*框架
  10. 抛弃jQuery,深入原生的JavaScript

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号