在多个层面上提高 AngularJS 的性能答案

【问题标题】：Improve AngularJS performance on multiple levels在多个层面上提高 AngularJS 的性能
【发布时间】：2015-07-21 11:22:19
【问题描述】：

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

经过短暂的实地考察，我发现了一些非常有用的资源：

11 Tips to Improve AngularJS Performance

无论如何，我需要一些关于一些主题的额外建议：

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

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

2。翻译/本地化

我正在使用 Angular Translate - i18n Reference，但是当我翻译页面元素时，我必须使用例如<button>{{btnName | translate}}</button。这种技术和过滤器的整体使用被认为是最大的性能缺陷之一。该页面有很多元素，因此这确实可能会减慢加载速度。 有没有更好的解决方案或变通方法？

3.总体

我已经阅读了ng-repeat 的多个线程及其track by 功能，所以我认为它完成了，但我仍然不是 100% 确定我理解 $digest ($apply) 循环正确。
我阅读了一些我们应该“避免将任何东西直接绑定到函数”的 cmets，但我不太明白。

欢迎提供任何与 AngularJS 及其性能相关的额外 cmets 或建议！

谢谢你:)

【问题讨论】：

1.您可以使用$ocLazyload 延迟加载那些。 2. 我知道没有好的角度解决方法（尽管我个人通过使用自己的渲染器来解决它）。 3. 当ng-repeat 上有很多项目时，track by 很好。绑定到函数很昂贵，因为它们的运行与$$watchers 计数成正比。
谢谢你的回答，我会看看这个$ocLazyload。我目前在使用 Grunt 和 Gulp 时遇到了麻烦，因为该项目非常大，目前很难将它们集成起来:(

【解决方案1】：

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

【讨论】：