Ember table 渲染性能

Question

我正在使用 ember 1.9.1 并尝试渲染 160 个左右的项目，这大约需要 3 秒。我已经使用 unbound 选项删除了大多数列的绑定。我的模板如下所示：

<table>
  {{#each item in model}}
    <tr>
      <td>{{item.isFlagged}}</td>
      <td>{{item.status}}</td>
      <td>{{unbound item.title}}</td>
      <td>{{unbound item.list}}</td>
      <td>{{unbound item.scope}}</td>
      <td>{{unbound item.org}}</td>
      <td>{{unbound item.approver}}</td>
      <td>{{item.time}}</td>
      <td>{{unbound item.submitted}}</td>
    </tr>
  {{/each}}
</table>

每个项目都是一个 DS.Model，具有相当多的关系，但即使所有数据都已解析并且我在已加载数据的视图之间切换，它仍然需要大约 3 秒 Chrome .

我试过使用 Chrome 'Timeline' 工具，但我不知道我在做什么。它显示了我的点击（切换视图），然后有大量 'Parse HTML' 行和 11 个 GC 事件影响每个 GC 约 8 MB。所以我肯定做错了什么，但我不知道是什么。

故障排除和跟踪我的问题的后续步骤是什么？

Answer 1

我最终选择了 ember-cloaking and moved from a table to a list of divs (because ember-cloaking didn't support tables). There is a fork of ember-cloaking ，它声称支持表格，但在我发布这篇文章时还不可用。

这也在 ember 论坛上交叉发布，引导我使用上述库 - http://discuss.emberjs.com/t/slow-rendering-of-150-item-table/7174

Ember table 渲染性能

Ember table render performance

ember.js