2

我即将构建一个新的单页 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 动态创建选项卡和表格，以减少数据绑定项的数量？

4

2 回答 2

3

Some optimizations that i can suggest of would be

  • Look at bindonce directive. This does not create a watch once data is bounded. This should fix most of your issues.
  • Use directives like ng-if these destroy\create the DOM based on conditions. If a tab is not in focus what is the point having data bounded to it. Do binding just in time. And maybe destroy the page DOM once the focus on tab is lost (with ng-if) only.

Also test you app with dummy data, to verify how the real performance is and whether it makes sense to try the second option i have mentioned.

于 2013-10-07T13:50:44.750 回答
0

Here on StackOverflow is a great answer of Misko, talking about performance.

TL;DR: 2000 elements should be fine!

于 2013-10-07T13:50:10.283 回答