angularjs - 使用选项卡和表格的 Angular 性能

Question

我即将构建一个新的单页 Web 应用程序，我认为主视图会非常复杂，我正在努力决定是否使用 Angular.js。我担心的是是否会有太多的数据绑定(bind)导致 UI 的性能变得迟缓。

该应用程序将有一个由 2 个面板组成的 View 。一个将有 8 个选项卡，每个选项卡包含一个包含 3 个列、40 行和一个列的表，每行包含一个数字列表(最多 4 个数字)，其中每个数字都是可单击的(单击一个数字会导致另一个 Pane 中发生某些事情)。我正在考虑使用 ng-repeat 指令从后端提供的数据中动态创建选项卡和表格以及数字列表，因为不同用户的内容会有所不同。所以我认为这意味着 8 * (2 + 4) * 40 (1920) 项将 watch 添加到 $watch 列表中。我认为这意味着每次在 $digest 循环中都会检查很多事情，即使这些项目在第一次创建后永远不会改变。

第二个 Pane 将有其他选项卡和项目，虽然没有第一个 Pane 那么多，所以如果我使用 AngularJS 和 ng-repeat，总共将有超过 2000 个项目涉及数据绑定(bind)。

使用 AngularJS 时，一个 View 的项目是否太多，即 UI 性能会因项目数量而变得迟缓吗？

是否有任何替代方法可以使用不使用 ng-repeat 的 AngularJS 动态创建选项卡和表格，以减少数据绑定(bind)项的数量？

Answer 1

我可以建议的一些优化是

看bindonce指示。一旦数据有界，这不会创建 watch 。这应该可以解决您的大部分问题。

使用像 ng-if 这样的指令这些销毁\根据条件创建 DOM。如果选项卡不在焦点上，那么将数据绑定(bind)到它的重点是什么。及时绑定(bind)。一旦失去对选项卡的关注(使用 ng-if)，可能会破坏页面 DOM。

还使用虚拟数据测试您的应用程序，以验证实际性能如何以及尝试我提到的第二个选项是否有意义。