Angular JS Scaling&Performance

Question

我们正在为一家银行建立的Angular应用程序冲击性能问题.

不幸的是,显示代码片段是违反合同的行为.无论如何,我可以描述一些正在发生的主要问题,我希望可以推荐最佳实践.

应用结构:

• 基本上,一个巨大的多表单页面.
• 每个表单都是它自己的部分,嵌套控制器和部分深度约为3级.
• 在json对象的集合上重复相同的形式.
• 每个表单都绑定到重复的对象/模型.
• 我们应该支持页面上1-200个表单的任何位置.

如果你看一下时间表.我们花了很多时间在jQuery解析html方法,jQuery重新计算stye方法,GC事件(垃圾收集).我想最小化这些应该可以加快速度.它们都是Angular生命周期的一部分,但可能有更好的方法来避免它们.以下是探查器的一些截图:

最终,随着重复形式的数量超过5,应用程序缓慢.每种形式与其他形式相对无关.我们已经尝试不在表单之间查看任何共享属性.

Answer 1

您需要创建自定义指令以便使用angular来抑制性能问题.与ember angular不同的是,所有铃声和口哨都打开了,你可以自己调低音量.以下是我为帮助您而制定的一些指令.并非您的应用中的所有数据都需要双向数据绑定,因此您可以通过在需要的页面中放弃监视表达式来节省宝贵的CPU功率.所有这些指令都将数据绑定一次并不管它.

https://gist.github.com/btm1/6802599

https://gist.github.com/btm1/6802312

https://gist.github.com/btm1/6746150

上面的答案之一谈到ng-repeat有巨大的性能命中,所以我给你"set-repeat"一次性数据绑定重复指令:)

Answer 2

如果没有关于您的问题的更多信息,很难提供解决方案,但我最近遇到(并解决了)可能与您看到的类似的性能问题,并且与$ digest周期无关.

你会发现大多数关于angularjs性能的讨论(包括来自Misko的优秀帖子)都是关于脏检查和$ digest循环的性能.但这不是您可以使用angularjs遇到的唯一性能问题.第一步应该是确定摘要周期是否是您的问题.为此,您可以使用batarang,或只是查看您的应用程序,并确切地说它是缓慢的.当摘要周期很慢时,与UI的任何交互基本上都会很慢.

OTOH,你可以拥有一个具有快速摘要周期的应用程序,只有在加载,切换视图或以其他方式更改要显示的组件集时才会很慢,这可以在分析中显示为解析HTML和垃圾所花费的大量时间收集.在我的情况下,通过对html模板进行一些预先计算来显示,而不是依赖于ng-repeat,ng-switch,ng-if到处都可以解决这个问题.

我在小部件类型中使用包含ng-switch的ng-repeat ="小部件",以显示任意一组小部件(自定义自包含指令).用代码替换它以生成特定小部件集的角度模板,加速路由从~10s切换到几乎瞬间.

您可以在上方查看google网上论坛以获取有关我如何解决我的特定问题的更多信息,或者如果您需要一些具体建议,请提供有关您的应用的更多信息.

Answer 3

为了提高生产性能，请阅读下面非常好的单行：

引用 AngularJS 文档：

默认情况下，AngularJS 将有关绑定和作用域的信息附加到 DOM 节点，并将 CSS 类添加到数据绑定元素：

作为 ngBind、ngBindHtml 或 {{...}} 插值的结果，绑定数据和 CSS 类 ng-binding 被附加到相应的元素。

当编译器创建了一个新的作用域时，作用域和 ng-scope 或 ng-isolated-scope CSS 类都附加到相应的元素上。然后可以通过 element.scope() 和 element.isolateScope() 访问这些范围引用。

像 Protractor 和 Batarang 这样的工具需要这些信息才能运行，但您可以在生产中禁用它以显着提高性能：

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

您可以在此处阅读更多详细信息

Answer 4

一般来说，如果有超过 2000 个活动数据绑定，即每个 $digest-cycle 范围内有 2000 个项目被脏检查，AngularJS 的性能就会很差。因此，NG-repeat 对性能有很大影响；每个重复项至少设置两个绑定，不计算项内使用的任何其他数据或指令。

AngularJS 背后的一位开发人员在这个 SO 答案中对脏检查的细节及其性能进行了精彩的描述：

/sf/answers/678575341/

该答案下面的评论线程值得一读，我还在同一页面的下面的答案中分享了一些对此的想法：

/sf/answers/1286728551/