返回 登录
2

九种提高AngularJS性能的方法

阅读4028

原文9 Ways to Improve AngularJS Performance
作者:Justin Spencer
翻译:雁惊寒

译者注:本文介绍了提高AngularJS性能的九个方法,以及四个AngularJS性能增强辅助工具。以下是译文。

AngularJS是当今应用最广泛的Web应用程序框架,并且它的受欢迎程序在其期待已久的AngularJS 4.0到来之后不断上升。但是我们可以看到,几乎所有的Angular专家仍然在努力解决与AngularJS性能相关的各种问题,尽管它自己也做了很多的优化。

今天,在线业务受网络技术性能的影响很大。因此,有必要研究一下影响业务发展的所有因素。

不正确地使用AngularJS有可能会限制应用程序在市场上的表现,因此,AngularJS性能优化成为每个AngularJS开发专家的重要责任。这就是为什么我们要在这个博客中列出提高AngularJS性能的九种方法。

最近,巴西计算机科学家进行了一项调查,他们发现了导致性能问题的一些有趣的事实。这项调查并没有提到有关AngularJS在现实世界中如何运行的太多的信息,但是基于这项调查的研究为此提供了一些证据。

调查结果如下:

angular1

  • 有45%的人表示是源代码的问题影响了性能。
  • 只有8%的人承认对实际做了修改。
  • 有些受访者指责AngularJS的架构有问题。
  • 其中有些人指责不必要的双向绑定影响了性能。

在对AngularJS的性能进行了大量讨论之后,现在是时候看看这九种可以提高AngularJS性能的方法了。

AngularJS的性能可以通过digest cycle测量出来。digest cycle可以认为是一个循环。在这个循环中,Angular将检查所有的$scopes监视的每一个变量是否发生改变。如果$scope.myVar在控制器中定义并被标记为监视,则Angular将在每个循环中监视myVar是否发生改变。

1. 使用Batarang工具来评估监视器

Batarang是由Angular团队推出的一个伟大的开发工具,它可以减轻你调试的工作量。它包含了许多新功能,其中一些功能可以帮助你描述和跟踪AngularJS运行的性能。此外,在内存占用出现增长时,监视树能够确定哪些scope没有被销毁。

2. 原生JavaScript或Lodash的使用

Lodash通过重写一些基本逻辑来提高应用程序的性能,而不是依靠AngularJS内置方法。如果你的应用程序中没有包含Lodash,那么你可能需要使用原生JavaScript来重写所有内容。

3. 用Chrome的开发者工具Profiler来找出性能瓶颈

这是一个很方便的工具,它可以让你选择要创建的概要的类型。它通过记录内存分配时间线、内存分配概要和堆快照等手段来对内存进行分析。经过这一轮的性能优化之后,你的应用可以在两秒钟之内完全呈现出来,然后用户就可以随意与之交互了。

4. 减少监视者

AngularJS完全是围绕着digest cycle来运行的。每当digest cycle触发时,它将循环遍历每个绑定以检测模型是否发生了改变。通过减少监视者的数量,可以减少每个digest cycle所花费的时间。 它还可以减少应用程序的内存占用。

5. ng-if 优于 ng-show

ng-show指令在特定的元素上切换CSS显示属性,而ng-if指令实际上会先从DOM中删除元素,如果在需要的话重新创建。此外,ng-switch指令是ng-if的替代方案,具有相同性能优势。

6. 不要使用 ng-repeat

建议避免在JavaScript中使用ng-repeat来构建HTML。对于某些应用程序来说,使用ng-repeat会增加不必要的监视者。使用ng-bind-html指令是解决这个问题的更好的办法。

7. 使用$watchCollection(包括第三个参数)

通常在使用$watch的时候只会用到两个参数,但是如果加上第三个参数的话,例如`$watch('value',function(){},true)`,则可以让Angular执行深度检查(检查对象的每个属性)。但这可能会带来更多的性能开销。因此,为了解决这个性能问题,Angular提供了`$watchCollection('value', function(){})`,它的第三个参数的功能与$watch的几乎相同,只是它只检查对象属性的第一层,以降低性能开销。

8. 使用console.time来调试问题

如果你在对应用程序努力地进行调试,以解决性能问题的话,请使用console.time,这是一个非常棒的API。

9. 去抖ng-model

你可以使用ng-model来去除输入。例如,要撤销像GOOGLE这样的搜索输入的话,你必须使用ng-model-options=”{debounce:250}”。由于输入模型发生了变化,使得digest cycle每250ms触发不超过一次。

用于开发的时间现在非常宝贵,因此你需要一个像AngularJS这样的功能全面的框架来快速开展业务。


在研究了很多东西之后,我们收集整理了其他一些重要的工具可以用来增强AngularJS的性能。

下面看一下这四个AngularJS性能增强工具。

1. Protractor

Protractor是由Angular团队开发的最强大的端到端Angular自动测试工具。Protractor融合了很多伟大的技术,如NodeJS、Selenium、webDriver、Mocha、Cucumber和Jasmine。

protractor-logo

2. GulpJS

GulpJS可用于自动执行重复任务、流媒体构建系统,以及使用JSHint或ESLint检查JavaScript脚本。

gulp-1

3. TestingWhiz

TestingWhiz是一款用户友好的自动化测试工具,因为它具有无代码脚本功能。 TestingWhiz提供了端到端的测试解决方案来对AngularJS应用程序进行测试。它具有多种测试命令,可以很轻松地创建与AngularJS相关的测试。

testingwhiz-version-2-0-released

4. WebdriverIO

WebdriverIO可以让你只需通过几行代码就能控制浏览器或移动应用程序。它的测试代码简单明了、易于阅读。 集成测试运行器允许你以同步的方式编写异步命令,这样,你就无需关心如何来避免竞争状态。此外,它消除了所有繁琐的设置工作,并为你管理Selenium会话。

webdriverio

总结

正如我们所看到的,由于在Web开发中引入了很多新的JavaScript框架,Web开发的发展速度非常得快。为了从这些框架中获得最大的收益,你必须定期进行性能优化。

AngularJS是最强大的Web应用构建框架之一。通过提升AngularJS的性能,开发人员可以用更少的代码来做更多的事情。即便是编写出“意大利面条式代码”的风险也大大降低。

评论