但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为每个AngularJS开发专家的重要需求。这就是为什么我们在这个博客中列出了九种提高 AngularJS 性能的方法的原因。
相关阅读:2017 年前 5 大 JavaScript 框架
最近,巴西计算机科学家进行了一项调查,他们发现有关引起AngularJS程序员性能问题的原因的有趣事实。对于AngularJS在现实世界中的性能并没有太多的信息。但是基于调查的研究为此提供了一些证据。
AngularJS 的性能可以简单地通过它的 digest 周期测量。digest 周期可以被作为一个循环。在这个周期中,Angular 通过所有的 $scopes
来检查所有变量的改变。如果$scope.myVar 是定义在控制器(controller)中并且标记为观察,那么 Angular 将会对myVar更新进行监视,这种监视每迭代循环一次就检查一次。
对于使用 Angular 的团队来说, Batarang 是一个不错的开发工具,它可以减少你在调试上的压力。尽管可能有很多新特性,但它们主要还是来帮助你描述和追踪你的 AngularJS 的性能。此外,它是通过监控树来决定哪个范围不被销毁的,例如,通过查看内存使用量是否有增加来决定是否销毁。
没有使用 ng-repeat
指令就是应用程序的最大胜利,因此建议避免使用 ng-repeat
并使用 JavaScript 构建 HTML。对于发声的应用程序,使用 ng-if
导致增加不必要的观察者。使用 ng-bind-html
指令是摆脱这个问题的更好的解决方案。
使用带有两个参数的 $watch
是好的 - 但是在使用 $watch(‘value’,function(){},true)
时带有三个参数的 $watch,这使得 Angular 可以执行深度检查(以检查对象的每个属性)。 但代价可能是十分昂贵的。因此,为了解决这样一个性能问题,Angular提供了 $watchCollection(‘value’, function(){})
指令,它与第三个参数几乎相同,只是以低成本检查对象属性的第一层。
如果你的应用正努力调试问题并影响了Angular 性能,就需要使用 console.time,这是一个很不错的 API。
你可以用 ng-model 来控制输入调用方法的时间间隔。举例来说,像谷歌那样的搜索输入的时间间隔,你必须使用 ng-model-options=”{debounce:250}”。这能让其在 digest 周期内,至少每 250ms 就检测一次触发。
现在的开发时间是非常宝贵的,因此你需要一个像 AngularJS 这样全面的框架来快速开展业务。
经过大量研究,我们收集了一些别的重要工作来提高 AngularJS 的性能。
下面有 4 个用于提升 AngularJS 性能的工具。
Protractor 是最强大的自动化端到端的 Angular 测试工具,由 Angular 团队开发。Protractor 由一些伟大的技术组合而来,比如 NodeJS、Selenium]WebDriver、Mocha、Cucumber 和 Jasmine。
GulpJS 用于自动执行重复性的任务,是流式的构建系统,可以使用 JSHint 或 ESLint 来检查 JavaScript。
TestingWhiz 是最人性化的自动化测试工具之一,因为它拥有无代码脚本的特性。TestingWhiz 提供了端到端测试方案用于测试 AngularJS 应用程序。它有各种测试命令可以轻松创建 AngularJS 相关的测试。TestingWhiz 有一个相对动态的等待命令,所以以同步不同服务器等待 AngularJS 组件的时间。
WebdriverIO 让你只用寥寥几行代码就能控制浏览器或移动应用程序。你的测试代码看起来会很简单明了,易于阅读。它的集成测试运行工具可以让你以同步的方式编写异步命令,这样你就不必在意如何处理 Promise 以避免竞争条件。此外,它去掉了所有繁琐的设置工作并且可以为你管理 Selenium 会话。
评论删除后,数据将无法恢复
评论(5)
刷的看一遍下来,
- debounce 反绑定
- WebdriverIO 让你只和行代码
这些,应该可以在提交之前排除把。