在多个级别上提高AngularJS的性能

时间:2015-07-21 11:22:20

标签: javascript angularjs performance model-view-controller localization

我正在使用AngularJS编写复杂的多组件应用。目前,主要组件已准备就绪, 我想提高应用的性能

在对该领域进行简短调查后,我发现了一些非常有用的资源:

11 Tips to Improve AngularJS Performance

Improving AngularJS wep app performance example

AngularJS Performance in large applications

无论如何,我需要就一些主题提供一些额外的建议:

1。脚本和服务/工厂加载

  • 目前,所有脚本都加载在<body></body> index.html标记的底部。因此,当用户直接加载ui-route或我们只是重新加载给定页面时,将再次加载所有脚本。 我只想在使用给定脚本的状态下加载脚本。
  • 服务/工厂/等。以相同的方式加载。这导致不需要给出的页面例如加载它的服务,这会降低性能,因为数据负载很大。 我需要在当前状态下需要时初始化/加载它们。

2。翻译/本地化

  • 我使用Angular Translate - i18n Reference,但是当我翻译页面元素时,我必须使用例如<button>{{btnName | translate}}</button。这种技术和过滤器的整体使用被指出是最大的性能缺点之一。该页面有很多元素,所以这可能会减慢加载速度。 有更好的解决方案或解决方法吗?

第3。整体

  • 我已经阅读了ng-repeat及其track by功能上的多个主题,所以我认为它完成了,但我还是不是100%肯定理解 $digest$apply)正确循环。
  • 我读了一些评论,我们应该&#34;避免将任何内容直接绑定到一个函数&#34;,但我不太明白

欢迎任何有关AngularJS及其表现的其他意见或建议!

  

谢谢:)

1 个答案:

答案 0 :(得分:2)

阅读上述内容,您似乎已经尝试过优化AngularJS本身。但是,没有提及构建过程的优化。我想你调查Grunt或Gulp是明智之举。使用这些工具,您可以将所有JavaScript连接并缩小为单个缩小文件。这样,您在初始化网站时只有一次性有效负载。

选中此https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917