ember.js - Ember 表格渲染性能

Question

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

<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，但即使所有数据都已解析并且我在已加载数据的 View 之间切换，它在 Chrome 中仍然需要大约 3 秒。

我试过使用 Chrome 的“时间轴”工具，但我不知道我在做什么。它显示了我的点击(切换 View )，然后有大量“解析 HTML”行和 11 个 GC 事件影响每个 GC 约 8 MB。所以我肯定做错了什么，但我不知道是什么。

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

Answer 1

我最终选择了 ember-cloaking并从 table 移动到 div 列表(因为 ember-cloaking 不支持表格)。有一个 fork of ember-cloaking 确实声称支持表格，但在我发布这篇文章时还不可用。

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