Html 角度缩放&；演出

我们正在为一家银行开发一款棱角分明的应用程序，以解决性能问题

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

应用程序结构：

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

如果你看一下时间线。我们在jQuery解析html方法、jQuery重新计算stye方法、GC事件（垃圾收集）中花费了大量时间。我想减少这些应该会使事情加快一点。它们都是角度生命周期的一部分，但可能有更好的方法来避免它们。以下是探查器的一些屏幕截图：

---

最终，当重复表单的数量超过5个时，该应用程序会变得迟钝。每种形式都与其他形式相对不相关。我们已尝试不查看表单之间的任何共享属性。

通常，如果有超过2000个数据绑定处于活动状态，则AngularJS的性能会很差，即范围内的2000个项目在每个$digest周期都会被脏检。因此，Ng repeat对性能有很大影响；每个重复项至少设置两个绑定，不计算项内使用的任何其他数据或指令

AngularJS背后的一位开发人员对脏检查的细节以及它的性能给出了极好的描述，答案如下：

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

---

如果没有关于您的问题的更多信息，很难提供解决方案，但我最近遇到（并解决了）可能与您所看到的类似，并且与$digest循环无关

大多数关于angularjs性能的讨论（包括）都是关于脏检查和$digest循环的性能。但这并不是angularjs遇到的唯一性能问题。第一步应该是确定消化周期是否是您的问题。为此，你可以使用batarang，或者只是看看你的应用程序，看看它什么时候运行缓慢。当摘要周期很慢时，基本上与UI的任何交互都会很慢

OTOH，您可以拥有一个具有快速摘要周期的应用程序，只有在加载、切换视图或以其他方式更改要显示的组件集时，它才会变慢，这可以在分析HTML和垃圾收集时花费大量时间。在我的例子中，这是通过对html模板进行一些预计算来解决的，而不是依赖于ng repeat、ng switch、ng if everywhere

我使用了一个ng repeat=“widgets in widgets”，其中包含一个小部件类型上的ng开关，以显示任意一组小部件（自定义自包含指令）。用代码代替它，为一组特定的小部件生成角度模板，加快了从~10秒到几乎瞬间的路由切换

---

您可以查看上面的google groups线程，了解有关我如何解决特定问题的更多信息，或者如果您需要一些具体建议，可以提供有关您的应用程序的更多信息。

您需要创建自定义指令，以遏制angular的性能问题。与余烬不同，angular的所有铃声和口哨都是打开的，这取决于你来降低音量。下面是我为帮助您而创建的一些指令。并非应用程序中的所有数据都需要双向数据绑定，因此，您可以在需要的页面中放弃watch表达式，从而节省宝贵的cpu资源。所有这些指令都只绑定一次数据，而不进行处理

---

上面的一个答案谈到了ng repeat具有巨大的性能点击率，因此我给您提供了一个一次性数据绑定repeat指令：）

很抱歉将其作为“答案”，因为我还没有足够的分数发表评论

---

我们的AngularJS应用程序也遇到了类似的问题。使用“batarang”时，它似乎必须处理大量的范围对象，而它们的相关$watch表达式会造成性能问题。这让我们怀疑是否应该使用另一个框架或类似ReactJS的东西来处理“视图”部分

将DOM操作转移到自定义指令和大量$watch的$watch问题之间的一个中间点是使用“bind once”语义

---

这对于数据一旦可用就不可变的数据非常有用。请参见尝试避免以下情况

请避免使用ng repeat，如果您在中有超过50个元素 一次查看列表，避免使用手动手表

不要盲目地使用ng click、ng mouseenter、ng mouseleave等鼠标事件，直到它成为一种迫切的需要，尝试使用$event对象和js的事件传播概念来减少它们的数量

在可能的情况下，使用scope.$digest而不是scope.$watch，这样可以确保仅在子作用域上执行摘要循环

尝试嵌套作用域，即在一个父控制器中有一个或两个控制器，并将可重用逻辑保留在父控制器中，我在使用Ui路由器时在嵌套状态下使用了它（以满足在不刷新页面的情况下更改URL的req）

最重要！从HTML中删除所有过滤器

所有这些都会在应用程序的所有作用域上触发一个摘要周期，因此即使视图已呈现角度，也很有可能再次执行relin

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