Question

我有很多有条件的内联类控制器，有助于改变风格（例如正在进行的游戏和完成的游戏有不同的字体颜色）和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）最好删除嵌套指令以减少绑定量但最终跨页面有冗余代码？感谢

Answer 1

你所详述的内容仍然不是很清楚，但我可以给你一些有用的通用建议。

首先在Angular中，可以归结为页面上的绑定次数和随时间推移的摘要周期数。

要减少绑定，您应该查看角度为1.2.x的bindonce（第三方）指令或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都是表达式并且是针对当前范围计算的。

AngularJS性能：条件内联类/ ng-if vs控制器功能;

1 个答案: