AngularJS动态表性能

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

的要求为表如下：

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

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

定义内置并加载到该列的表的 scope。
ng-repeat每排叫了过来，然后在每列
在每个小区内我拨打电话到一个特殊的指令，以显示该单元格，其编译另一个指令。

这种特殊的指令看起来是这样的，它编译单元格的（编程确定）的指令，并取代了“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秒，这是一个问题，因为用户可以选择过滤显示的数据（包括更改列），并且每次执行任何操作时都必须经历延迟。我也担心大数据集会发生什么。

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

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

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

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

感谢您的任何帮助。

来源

2015-02-24 Max

你有没有尝试在'$ compile'之前移除'cell-directive' attr？我知道它并没有“任何”的意义，但有时事情并不像他们所说的那样。 – klauskpm 2015-02-24 15:07:34

我不确定你的意思，但据我所知，我没有编译保存'cell-directive'的元素，只有它的子元素。我无法真正删除它，因为它会随着数据更改而改变。 – Max 2015-02-24 15:09:15

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

1）一次性绑定。

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

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

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

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

来源

2015-02-24 15:13:38 DRobinson

1.我尽可能在路上有一次性绑定。 2.我不确定在我需要每个单元格指令的情况下，这会有多大用处？ 3.我会研究这一点，但是我的问题实际上与您更改行数时的延迟非常相似。 ng-repeat建议很好，我会看看是否可以为固定列创建一个设置模板。 – Max 2015-02-24 15:45:46

为了澄清，ui-grid库（可能还有其他）允许以每个单元为基础的自定义模板。我相当肯定''cellTemplate：'

'应该能够工作，只要你可以在每个列的定义中使用'getDirective'函数。 – DRobinson 2015-02-24 16:09:43

对不起，我不是说支持每个单元格指令，更多的是每个单元格指令似乎是我的性能问题的根源。 – Max 2015-02-24 16:49:37

AngularJS动态表性能

回答

相关问题