html5-Angular JS缩放和性能

我们正在使用为银行构建的Angular应用程序来应对性能问题。

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

应用结构:

  • 本质上,是一个巨大的多表单页面。
  • 每种形式都是其自己的部分,带有嵌套的控制器和大约3层深的部分。
  • 在json对象的集合上重复ng相同的形式。
  • 每个表单都绑定到重复的对象/模型。
  • 我们应该支持该页面上1-200个表格中的任何一个。

如果您看一下时间线。 我们在jQuery parse html方法,jQuery重新计算stye方法,GC事件(垃圾收集)上花费了大量时间。 我想将这些最小化应该可以加快速度。 它们都是Angular生命周期的一部分,但是可能有更好的方法来避免它们。 这是探查器的一些屏幕截图:

Recalculate Style GC Event

最终,随着重复表单的数量超过5,该应用程序变得迟钝。每种表单相对于其他表单都没有关系。 我们试图不监视表单之间的任何共享属性。

9个解决方案
21 votes

您需要创建自定义指令,才能抑制angular的性能问题。 与余烬角不同的是,所有铃铛都打开了,这取决于您是否调低声音。 这是我创建的一些指令以帮助您。 并非您应用中的所有数据都需要双向绑定数据,因此,您可以通过在需要的页面中放弃监视表达式来节省宝贵的cpu功能。 所有这些指令将数据绑定一次,然后将其保留。

[HTTPS://gist.GitHub.com/半条命1/6802599]

[HTTPS://gist.GitHub.com/半条命1/6802312]

[HTTPS://gist.GitHub.com/半条命1/6746150]

上面的答案之一是有关ng-repeat对性能的巨大影响,因此我给您“ set-repeat”一次性数据绑定的repeat指令:)

btm1 answered 2020-08-12T10:39:06Z
8 votes

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

您会发现有关angularjs性能的大多数讨论(包括Misko的出色文章)都涉及脏检查的性能和$ digest循环。 但这不是您使用angularjs可能遇到的唯一性能问题。 第一步应该是确定摘要周期是否是您的问题。 为此,您可以使用batarang,也可以只是查看您的应用程序以及它什么时候运行缓慢。 当摘要周期很慢时,基本上与UI的任何交互都将很慢。

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

我使用的是ng-repeat =“ widget in widgets”,其中包含有关微件类型的ng-switch,以显示任意组的微件(自定义的自包含指令)。 将其替换为代码,以为特定的小部件集生成角度模板,从而加快了从〜10s到几乎即时的路径切换。

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

jssebastian answered 2020-08-12T10:39:46Z
4 votes

要提高生产性能,请阅读以下非常不错的一线:

引用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);
}]);

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

Abbasi answered 2020-08-12T10:40:32Z
3 votes

通常,如果有超过2000个数据绑定处于活动状态,即在每个$ digest周期内对2000个项目进行脏检查,则AngularJS的性能将不佳。 因此,Ng-repeat对性能的影响很大。 每个重复的项目至少设置两个绑定,不计算该项目内部使用的任何其他数据或指令。

AngularJS背后的一位开发人员在此SO答案中对脏检查的详细信息及其性能进行了出色的描述:

[HTTPS://stack overflow.com/啊/9693933/179024]

答案下方的注释线程值得一读,我还将在同一页的下一个答案中分享一些想法:

[HTTPS://stack overflow.com/啊/18381836/179024]

MW. answered 2020-08-12T10:41:12Z
2 votes

很抱歉将其作为“答案”,因为我还没有足够的观点要发表评论。

我们的AngularJS应用程序也遇到了类似的问题。 使用'batarang'似乎必须处理大量的作用域对象及其相关的$ watch表达式会造成性能问题。 这让我们想知道是否应该使用其他框架或类似ReactJS之类的东西来处理“视图”部分。

5122014009 answered 2020-08-12T10:41:36Z
2 votes

尝试避免以下情况

  1. 如果您有超过50个元素,请避免使用ng-repeat一次列出清单,避免手动监视
  2. 不要盲目使用ng-click,ng-mouseenter,ng-mouseleave等鼠标事件,直到迫切需要时,尝试通过使用$ event对象以及js的事件传播概念来减少其数量

  3. 尽可能使用scope。$ digest而不是scope。$ watch,这确保摘要循环仅在子作用域上执行

    1. 尝试在一个父控制器中嵌套作用域,即一个或两个控制器,并将可重用逻辑保持在父级中,我在使用Ui-router时以嵌套状态使用了它(以实现需要更改URL而无需页面刷新的要求)。

    最重要的! 从HTML删除所有过滤器!

以上所有这些都会在应用程序的所有范围内触发摘要循环,因此即使视图已呈现角度,也很有可能再次执行无休止的摘要循环

Rishul Matta answered 2020-08-12T10:42:24Z
1 votes

在将DOM操作转换为自定义指令与使用大量$ watch的$ watch问题之间的中间立场是使用“绑定一次”语义。

这对于一旦数据可用就不可更改的数据非常有用。 参见bindonce

user239558 answered 2020-08-12T10:42:49Z
0 votes

这只是一个链接! 这只是我在阅读本文时所想到的一个想法,我还没有探索过,但是有人发现了,所以我正在等待他们对我的想法的答复。 如何使用共享的Web Worker从ui线程中进行大量繁重的处理? [https://github.com/h2non/sharedworkers-angular-poc]

我的另一个想法是一个简单的想法。 您的应用将从无限滚动中受益吗? 我的意思是这些表格可能无法全部显示在屏幕上,它们没有相互连接,所以为什么不按需绘制它们呢? 将它们加载到内存中,然后相应地绘制它们。

Zoneh answered 2020-08-12T10:43:15Z
0 votes

就像其他任何性能优化一样,了解如何分析应用程序以找到真正的瓶颈也很重要。 然后,您可以一一解决。 我通常按以下顺序解决瓶颈:

  • 我的JavaScript代码
  • 在每个空闲摘要循环上运行的角度表达式(复杂的观察器和过滤器)
  • 角度构造(ng-repeat,复制对象以进行摘要循环)

我已经逐步介绍了一个角度示例,展示了如何在每个步骤中识别瓶颈。 [http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html]

gleb bahmutov answered 2020-08-12T10:43:53Z
translate from https://stackoverflow.com:/questions/17656397/angular-js-scaling-performance