为什么我的角网格这么慢?

时间:2015-04-22 09:21:42

标签: angularjs performance datagrid angularjs-directive angularjs-ng-repeat

所以,我已经制作了一些自定义指令,它基于浮动的div来绘制数据网格(因为在FF中嵌套的flex实现很糟糕 - 但它不是重点)。

工作原理:

  • 我通过类似<the-grid data-list="parentController.displayedRows">

  • 的方式将一些数据集合传递给指令
  • 在第一个指令中,我通过像<a-grid-column data-value="row.value"></a-grid-column>之类的列来获取列,其中包含许多我在这里不准确的属性。

  • data-value值可以是直接表达式,绑定到the-grid指令控制器重复的行以显示每列,或者必须的函数为了显示parentController的预期价值而进行$ eval- uated。

  • 在我的<the-grid>指令控制器中,我有我的网格的渲染模板,它创建了一个嵌套的ng-repeat div(第一个在数据集的行上,第二个在列上,在指令中创建,它看起来像:

    <div data-ng-repeat="row in list">
        <div data-ng-repeat="cell in theGridColumns"
             data-ng-bind-html="renderCell(row, cell)">
        </div>
    </div>
    
  • 我有一些键盘导航,以便快速选择一行或在分页或多个标签中导航,除了更新一些&#34; selectedRowIndex&#之外,这只是在所选行上应用某些类。 34;

  • 我使用angular-vs-repeat以便在我的DOM中拥有最少的行div(因为应用程序在慢速计算机上运行)。这很有效。

  

问题在于每次我遇到一些&#34; up&#34;或&#34; down&#34;键盘上的键,Angular是&#34;重绘&#34;列表中的每个单元格。

因此,假设我的数据列表中有200行,每行有7列。首次加载页面,它在renderCell()函数中传递~3000次。好吧,让我们接受(不要理解为什么,但好吧)。

我按下向下键才能转到列表的第二行。它在renderCell()函数中传递了大约1100次。

所以是的,结果非常缓慢(想象一下,如果我按下向下箭头键以便在我的行中快速导航)......我无法接受。如果有人可以向我解释......任何帮助都会被大大接受:)

如果我在没有指令的情况下做同样的事情(直接DOM操作,手工制作的列而不是ng-repeat中的ng-repeat),每件事都是平滑而干净的。

是的,我已经查看了市场上的每个角度网格。没有人满足于我的目的,这就是为什么我决定创建自己的目的。

不,我真的不能给你一些JSFiddle或者其他任何东西。整个应用程序非常突发,隔离这是一种复杂的。)

1 个答案:

答案 0 :(得分:2)

尝试使用bind一次(angular 1.3 +)

<div data-ng-repeat="row in ::list">
    <div data-ng-repeat="cell in ::theGridColumns"
         data-ng-bind-html="::(renderCell(row, cell))">
    </div>
</div>