Angular.js Backbone.js还是有更好的performance
我是一个Web开发人员,我开始大规模地开发Web应用程序,但是我不确定使用什么框架。 我正在考虑Angular.js,但我也考虑过Backbone.js。 对你来说,最好的框架是什么? 或者至less有两个看比较的performance。
这里的任何人声称一个解决scheme比其他解决scheme更快或更慢,或者对这些库或框架(或者一般的性能testing)知之甚less,或者是个骗子。
性能是一个非常棘手的特征来衡量,因为有这么多的variables影响它。 仅举几例:
- testing/基准代码的质量
- 库/框架代码的质量
- 应用程序的types
- 应用程序代码的质量
- 浏览器使用
- 客户端hw
- 其他进程在客户端hw同时运行
- 互联网连接的质量和速度
- 服务器负载和服务器性能
- 这样的例子不胜枚举…
但更重要的是,你的performance究竟是什么意思? performance是一个涵盖了太多东西的非常广泛的术语,包括:
- 花费时间来启动应用程序
- 花费时间来响应用户操作
- 资源利用率(CPU /内存/networking)
- 由库/框架/应用代码完成的dom操作的性能
- 垃圾收集器的友善
- 再一次的名单继续下去…
解决您的问题的最佳方法是创build一个应用程序,该应用程序可以很好地代表您正打算使用竞争库/框架来构build和实现的应用程序。 然后写一个质量benchark将比较他们在稳定的环境中头对头。
这显然是一项非常艰巨的任务,只有一个攸关的人才能承担这个任务。
然而,这个问题有一个不同的解决scheme:理解你正在使用的框架/库,特别是:
- 学习框架/库在内部使用的核心stream程和algorithm。 虽然你通常不应该在意,当你遇到性能问题时,理解你的应用程序如何执行,将使你能够识别和修复性能问题
- 检查性能是否是图书馆/框架作者所具有的专长
- 检查框架/库是否可以帮助您识别性能问题并修复它们
至于Backbone和AngularJS之间的实际比较,你正在比较两种截然不同的解决scheme。
Backbone不会为你做任何dom操作,所以你的应用程序的速度将主要取决于你可以如何操作(这是你的专业知识?)。
AngularJS为你做了大部分的操作,而且我们在这方面有很多的专业知识,所以除非你真的很好,否则你会很难与我们匹配。
其次,骨干模型的变异观察是基于事件,模型包装以及使用人工获取器和设置器的。 不仅如此,这可能是非常低效率的,因为缺乏事件聚合(最新的主干版本可能有这个解决方法),但是使用人为的getter和setter也会干扰浏览器中的JIT编译器。
米斯科写了一篇关于Angular如何进行神奇模型突变观察的文章。 所以我不打算在这里重复。 但基本上,AngularJS应用程序的性能直接关系到当前应用程序视图中使用的绑定的数量和复杂性。 考虑到这一点,您可以轻松预测Angular的性能。 更好的是,通过像Chrome这样的AngularJS Batarang扩展工具,我们可以让您轻松testing您的应用程序,并了解哪些页面上的绑定速度很慢,这使您可以专注于修复代码中的重要部分。
最后,我会说,没有任何库或框架可以成为所有用例的最佳解决scheme,所以您应该了解更多关于您构build应用程序的工具,以及何时真正重要,决定哪一个最好对于给定的用例。 我敢打赌,对于大多数要编写的应用程序来说,如果更换框架或库,性能不会有明显改变。 所以我会更加注意其他因素,比如生产力,易用性,可testing性,社区和文档,然后再担心性能。
而最后一件事:基准往往是误导性的,但检查这些,并采取一粒盐。
-
Backbone + Ember
: http : //jsfiddle.net/jashkenas/CGSd5/ -
AngularJS
: http : //jsfiddle.net/mhevery/vYknU/23/
如果将其降低到最低限度,您可以更快地使骨干更快。 我删除了从骨干的依赖关系下划线或lodash使它更轻,并修改他们的事件使用豆和几乎enderjs库减去morpheus我交换了补间灯。
我会告诉你,这比wayyyyy快。 页面加载以毫秒对秒。
有angular的是,MVVM的devise模式很慢,因为你有很多直接的DOM交互。 JavaScript没有DOM就很快。 所以尽可能less的使用DOM,这对MVVM来说是不可能的。
最好是用非常小的快速和轻量级DOM引用分隔出你的逻辑,当你可以使用指针时总是一个更好的select。 我已经使用和审查了每个框架行再见线。 股票你会得到相同的performance,修改是一个不同的故事。
骨干库存臃肿,大部分模板引擎都很慢。 所以使用dotjs模板,使用ender而不是jQuery,使用bean来定制事件。
Angular有一个极其缓慢的模板引擎,而且它沉重的DOM使用速度让它变得更慢…更不用说所有混合到标记中的声明性绑定都很难维护和阅读。
我已经完成了jsperfs几乎所有已知的框架和库我build立框架的生活。 是的,涉及到许多变数,但是如果做得好的话,我会select一周中的任何一天。 MVVM将会消亡… MVP就是它涉及到前端框架的地方。
Angular,Ember和KO还有另一个性能比较:
http://jsperf.com/angular-vs-knockout-vs-ember/2
在这种情况下,明显的胜利者是Angular,但是如前所述,性能testing很less是直接或公平的。
看看knockoutjs吧。 看看video,了解MVVM如何在JavaScript世界中工作。
我用它为less数项目,迄今为止非常高兴。 我看到它是新的ASP.NET MVC 4(SPA)的一部分,并得到微软的支持。
不一定是答案,而是另一个资源链接,对每个框架都有一个通用的优点/缺点。 我认为伊戈尔·米纳(Igor Minar)说的非常重要,专注于易于学习,易于实施的方法,并且不会妨碍您的工作效率而不是执着于性能。
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
对于它的价值,Angular JS和Ember JS对我的吸引力主要是因为它们使用绑定非常类似于Flex的绑定机制(在高层次上),并且使得HTML大部分与控制器/模型逻辑分离。
切线,但在@ igor-minar已经在https://stackoverflow.com/a/11498872/850996
有几个例子,我遇到了与这里讨论的相关的性能问题。 而这些例子并没有涉及任何框架(超越jQuery核心访问DOM)。
我们有几个UI组件,我们正在构build,样式化和渲染到由大量元素组成的DOM树。 Javascript和DOM具有内在的性能特点,即读取DOM属性块的任何挂起更新到DOM [1]。 例如,如果更改一个元素的5个CSS属性(浏览器可能排队并稍后执行),然后尝试读取一个CSS属性,则需要先完成待处理的DOM写入,然后才能将您返回的一个属性刚刚阅读。 例如,像读取element.offsetHeight这样的简单场景可能会很昂贵,因为它需要DOM完成待定更新,然后在确定元素的高度之前对元素进行度量和布局。
我们有很多没有考虑到这个基本特性的代码。 修复它需要优化它,以最大限度地减less拦截DOM读取。 此外,在将DOM子树附加到文档之前将它们构build为帮助。
有了所有这些调整,我们仍然无法获得大型列表等场景所需的性能(例如,滚动列表视图可能包含数千个列表项,每个列表项都由多个DOM元素组成,以获得所需的视觉样式) 。 在这里,我们不得不改变代码来虚拟化列表,只渲染列表中实际可见的DOM元素的子集[2]。
我想添加到这个主题的主要评论是说,你select的框架不会解决你可能遇到的应用程序中可能遇到的所有性能问题。 所以,正如其他反应所指出的那样,了解你所select的框架如何实现它的魔力,并select一个框架,让你看到它正在做什么(通过性能仪器)将最终得到回报。 而且框架不能替代理解现代浏览器实现的核心特性。 多年前写的高性能JavaScript书仍然是一个很好的资源。 学习使用许多可用的分析工具,以便快速了解应用程序中的瓶颈所在。
最好,
–
参考文献:
[1]。 http://shop.oreilly.com/product/9780596802806.do阅读有关DOM脚本的第3章;
[2]。 https://github.com/shyam-habarakada/js-virtual-list-view
主干获胜http://jsperf.com/angular-vs-ember-vs-backbone-vs-canjs-vs-knockout/24
Angular获胜http://jsperf.com/angular-vs-ember-vs-backbone-vs-canjs-vs-knockout/23
正如你可以看到这些代码,性能是非常棘手的事情,完全取决于开发人员。 但是BB有很好的性能提升潜力
没有基准的骨干和angular度。 仍然分享我在两个同样的应用程序 – 一个中等大小的应用程序,与SPA的真实经验。 首先我们使用了Backbone ,并完成了很多function。 更高效和清晰的代码比直接写在JS / jQuery中 。 一年后,我们转移到了angularjs 。 重写所有的东西,现在我们有大约140个指令,控制器和服务混合在一起。 代码质量和生产力要好得多。 但是它在主干上的速度不如同样的应用程序。 现在只是观察对象。观察将被释放在铬为perf提升。 Angularjs队必须观看表演angular。
在你select一个框架之前,你应该很好地阅读它适合的地方。 如果你的JSON响应太多,并且太多的对象在任何时候都活着,那么angular度就会变慢。 骨干网赢了,但是你需要用Backbone来自己pipe理很多东西,代码质量和模式。