0

我的控制器带有许多有助于改变样式的条件内联类（例如，正在进行的游戏和已完成的游戏具有不同的字体颜色）和用于条件表示的 ng-if（例如，如果团队由 2 人组成，则显示短名称与全名）元素取决于传入数据的值。ng-if 示例：

<span ng-if="(isShortName && eventType == 'S')|| eventType == 'D'" ng-bind="player.shortName"></span>
<span ng-if="(!isShortName && eventType == 'S')" ng-bind="(player.firstName + ' ' + player.lastName)"></span>

由于多次使用相同的布局（同时使用许多事件），我创建了显示 1 个事件的指令，然后使用 ng-repeat 将此指令应用于来自传入数据的多个事件。

该事件指令也有指令，例如显示表的标题。

传入的数据量是巨大的。有了这么多绑定，我注意到性能下降。

我从最佳实践和性能改进的角度想知道：

1）在控制器中具有检查什么是适用于元素的适当类与内联条件类的功能是否更好？

2）在控制器中具有检查要使用的适当名称表示并返回就绪字符串与内联ng-if的功能是否更好？

3）最好删除嵌套指令以减少绑定量，但最终会在页面之间产生冗余代码？谢谢

4

1 回答 1

1

您详细说明的内容仍然不是很清楚，但我可以给您一些有用的通用建议。

首先，在 Angular 中，性能归结为页面上的绑定数量和随时间运行的摘要周期数。

要减少绑定，您应该查看Angular bindonce1.2.x 的（第三方）指令或::Angular 1.3.x 中现在可用的符号

bindonce并::用于在模型和视图之间进行一次时间数据绑定。这对于绑定后不会更改的数据很有用。

使用ng-if而不是ng-show也减少了绑定，因为 DOM 元素没有添加到视图中并且没有设置绑定。

还要看看http://binarymuse.github.io/ngInfiniteScroll/你是否正在渲染一个大列表。

关于减少摘要周期，请查看 Brian Ford http://briantford.com/blog/huuuuuge-angular-apps的这篇文章，尤其是有关摘要周期的部分。

最后，如果绑定表达式是函数或内联表达式，则没有太大区别，因为对于 Angular 来说，两者都是表达式并且根据当前范围进行评估。

于 2015-04-02T06:49:45.407 回答