我即将构建一个新的单页Web应用程序,我认为主视图将非常复杂,我决定是否使用Angular.js。我担心的是,是否存在过多的数据绑定导致UI的性能变得迟缓。
该应用程序将包含2个面板的视图。一个将有8个选项卡,每个选项卡包含一个表,其中每列有3个列,40行和一个列,其中包含一个数字列表(最多4个数字),其中每个数字都是可点击的(单击数字会导致其他窗格中出现某些内容)。我正在考虑使用ng-repeat指令动态创建选项卡和表以及从后端提供的数据列表,因为不同用户的内容会有所不同。所以我认为这意味着将8 *(2 + 4)* 40(1920)项目添加到$ watch列表中。我认为这意味着每次围绕$ digest循环都会检查很多东西,即使这些项目在第一次创建后永远不会改变。
第二个窗格将包含其他选项卡和项目,尽管没有第一个窗格中那么多,所以如果我使用AngularJS和ng-repeat,那么将有超过2000个涉及数据绑定的项目。
使用AngularJS时,一个视图的项目是否太多,即用这个项目的UI性能会变得迟钝吗?
是否有其他方法可以使用不使用ng-repeat的AngularJS动态创建标签和表格,以便保持数据绑定项目的数量减少?
答案 0 :(得分:3)
我可以建议的一些优化是
ng-if
这样的指令,根据条件销毁\创建DOM。如果选项卡不在焦点上,那么数据的界限是什么。及时约束。一旦焦点丢失(仅限ng-if),可能会破坏页面DOM。还要使用虚拟数据测试您的app,以验证真实性能如何以及尝试我提到的第二个选项是否有意义。
答案 1 :(得分:0)
Here on StackOverflow是Misko的一个很好的答案,谈论表现。
TL; DR: 2000元素应该没问题!