9种改善AngularJS性能的方法(2)

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

没有使用 ng-repeat 指令就是应用程序的最大胜利,因此建议避免使用 ng-repeat 并使用 JavaScript 构建 HTML。对于发声的应用程序,使用 ng-if 导致增加不必要的观察者。使用 ng-bind-html 指令是摆脱这个问题的更好的解决方案。

7、使用 $watchCollection (包含第三个参数)

使用带有两个参数的 $watch 是好的 - 但是在使用 $watch(‘value',function(){},true)时带有三个参数的 $watch,这使得 Angular 可以执行深度检查(以检查对象的每个属性)。 但代价可能是十分昂贵的。因此,为了解决这样一个性能问题,Angular提供了 $watchCollection(‘value', function(){})指令,它与第三个参数几乎相同,只是以低成本检查对象属性的第一层。

8、为了调试问题使用 console.time

如果你的应用正努力调试问题并影响了Angular 性能,就需要使用 console.time,这是一个很不错的 API。

9、反绑定 ng-model

你可以反绑定输入的 ng-model 。举例来说,像谷歌那样的反绑定搜索输入,你必须使用 ng-model-options=”{debounce:250}”。这能让其在 digest 周期内,至少每 250ms 就检测一次触发。

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

经过大量研究,我们收集了一些别的重要工作来提高 AngularJS 的性能。

下面有 4 个用于提升 AngularJS 性能的工具。

1、 Protractor

Protractor 是最强大的自动化端到端的 Angular 测试工具,由 Angular 团队开发。Protractor 由一些伟大的技术组合而来,比如 NodeJS、Selenium]WebDriver、Mocha、Cucumber 和 Jasmine。

2、GulpJS

GulpJS 用于自动执行重复性的任务,是流式的构建系统,可以使用 JSHint 或 ESLint 来检查 JavaScript。

3、TestingWhiz

TestingWhiz 是最人性化的自动化测试工具之一,因为它拥有无代码脚本的特性。TestingWhiz 提供了端到端测试方案用于测试 AngularJS 应用程序。它有各种测试命令可以轻松创建 AngularJS 相关的测试。TestingWhiz 有一个相对动态的等待命令,所以以同步不同服务器等待 AngularJS 组件的时间。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/899.html