AngularJS + UI-Grid + Bootstrap选项卡+应用程序性能

Question

我正在使用bootstrap（uib）标签，角度1，角度ui网格。每个选项卡包含一个网格，每个选项卡也可以包含子选项卡。 我在申请中遇到严重的性能问题。

数据性质 - 树形结构，不能分页。大小可以是MB。 我尝试了两种方法：

方法1： 我使用ng-show在每个选项卡中呈现网格，这样在切换选项卡时将DOM保留在浏览器中。 当打开多个标签时，它确实会降低应用程序的速度。

方法2： 如果我使用ng-if在每个选项卡中渲染网格，这会在切换选项卡时删除DOM，在切换选项卡时需要花费很多时间。 因为它必须再次重新渲染整个网格。之后，我需要在该网格上再次应用状态更改以进行恢复 以前的状态。

Answer 1

我认为您可以继续使用方法2，但请按照以下步骤操作：

1. 初始化所有没有数据的网格
2. 只需为第一个网格加载数据，然后将数据绑定到该网格即可。
3. 为其他网格加载数据。将它们保留在一些变量中。
4. 当用户单击其他选项卡时，请绑定相关数据。

如果要在单击其他标签时获取实时数据，请不要执行第3步，当用户单击其他网格时，请进行ajax调用以获取数据并将其绑定到网格。