Question

我正在开发一个项目，该项目需要从一组头对象动态构造一个表：

[{ field: "name", show: true, title: "Name"},
 { field: "id", show: true, title: "ID"},
 { field: "time", show: true, title: "Time"}]

以及以一定间隔更新的数据对象数组：

[{ name: "Abc", id: 123, time: "300" }, 
 { name: "Def", id: 456, time: "10" }]

我的模板看起来像这样：

<table class="table">
  <thead>
    <th ng-repeat="header in cols">
      {{::header.title}}
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="row in visibleData">
      <td ng-repeat="col in cols">
        {{::row[col.field]}}
      </td>
    </tr>
  </tbody>
</table>

请注意，这是一个简化版本，但它包含重要的内容。

截至目前，渲染一个包含10个cols和20个行的表大约需要200ms（这会在滚动和其他页面动画中产生明显的延迟）。

正如您所看到的，我尝试过使用一次性投标，但这并没有明显改善效果。我尝试过的另一件事是跟踪“跟踪”。 row.id，但这导致数据完全停止更新（即使某些列已更改，也会重用初始DOM对象。）

所以我的问题是，我应该采取什么措施来优化这种配置？

非常感谢任何帮助。谢谢:)

AngularJs动态表性能问题

0 个答案: