AngularJS动态表性能

Question

我目前正在为相当复杂的报表创建一个表。 它工作但性能很差，建表需要4-5s。

---

的要求为表如下：

1. 表的列被动态地确定。有一组固定的列开始，然后是一个动态部分，然后是另一个固定集。
2. 每个单元的内容也是动态确定的。我的意思不仅仅是单元格的数据发生了变化，而且它呈现的方式也发生了变化。一些细胞简单地输出的值，一些提供输入等

---

的当前溶液工作大致如下：

1. 定义内置并加载到该列的表的 scope。

2. ng-repeat每排叫了过来，然后在每列

3. 在每个小区内我拨打电话到一个特殊的指令，以显示该单元格，其编译另一个指令。

---

这种特殊的指令看起来是这样的，它编译单元格的（编程确定）的指令，并取代了“cellDirective”节点的内容：

directives.directive('cellDirective', ['$compile', function ($compile) { 

    return { 
     link: function (scope, elem, attrs) { 
      scope.$watch(
       function (scope) { 
        return scope.$eval(attrs.cellDirective); 
       }, 
       function (value) { 
        // profiler suggests that this is the bottleneck 
        elem.html(value); 
        $compile(elem.contents())(scope); 
       } 
      ) 
     } 
    } 

}]); 

而且模板调用它：

<tr ng-repeat="rows in rows"> 
    <td ng-repeat="column in columns"> 
     <div cell-directive="column.getDirective(row)"></div> 
    </td> 
</tr> 

---

我面临的问题是性能不佳。生成表需要4-5秒，这是一个问题，因为用户可以选择过滤显示的数据（包括更改列），并且每次执行任何操作时都必须经历延迟。我也担心大数据集会发生什么。

我已经做了一些挖掘和发现：

1. 对于〜100行中的应用程序结合手表。似乎建议的限制是2000，所以显然我已经完结了。
2. 在Chrome的探查见到这种情景，我可以看到的执行时间的大部分花费指令编译步骤内发生

---

我正在寻找任何建议改善这一性能表。

我曾考虑过为整行构建一个模板并在一个步骤中编译它，但一直未能成功实现这样的系统。

感谢您的任何帮助。

Answer 1

有几件事情，你可以做，以减少观察者，同时建立你的表。下面是一些建议：在任何不需要总是观看（例如，也许name字段将不会每id改变，在这种情况下，你可以使用{{::item.name}}）

1）一次性绑定。

2）使用表库。 UI-Grid非常受欢迎，目前正在进行大量的开发。

3）Virtualization可能会有帮助，但只有100行，它不会是一个很大的好处。

对于过滤，只需在行上重复使用trackBy就可以大大提高重新渲染元素的时间。

你还提到在动态列之前和之后有几个静态列。考虑从ngRepeat中抽取出来，以便它们不必检查每个摘要循环。这将仅消除数百名观察者。