使用Ember.js顺利渲染大型列表的一部分

Question

我正在寻找一种平滑渲染列表的大“部分”的方法。 这个列表现在很大了1.000项。（测试集）我发现这个列表的渲染需要花费最多的时间。不是我正在做的排序和过滤。 当我立即渲染/查看整个列表时，浏览器会锁定，直到完成为止。

我该怎么做才能加快渲染速度？

我应该使用分页吗？有没有办法顺利滚动列表，只渲染可见的列表的一部分。我应该听什么事？示例代码？

Answer 1

我想评论而不是回答，但我没有那个代表（这似乎是倒退）。无论如何，

首先，定义“巨大”列表。多少行？

其次，定义“渲染”。您是否需要尽快吐出HTML，还是需要生成数据绑定视图？

根据我的经验，生成HTML的最快方法是将字符串推送到数组，例如

var s=""; 
s.push("<table.."); 
$(body).append(s.join("")). 

因此，如果您想获得最佳性能，那么这就是您的选择。您可以通过简单地覆盖render（）方法将此技术用于ember视图。当然，你失去了数据绑定，这是ember最酷的部分。如果您需要数据绑定，但只需要在几个字段上，您可以通过使用未绑定的帮助程序关闭不需要的数据绑定来将性能提高到令人满意的水平：

{{unbound myfield}}

Answer 2

我花了很多时间在这个问题上，我发现最好的答案是在滚动到列表项时动态加载它们。

列表

ember-list-view

表格

ember-table

希望这有助于某人。

Answer 3

我还需要在表格中添加过滤和排序。我创建了一个大数组的子集。可见。屏幕上的'duh'可见。它只有50行左右，速度非常快。无论如何，一次渲染1000行或更多行是愚蠢的。注意使用{{unbound myfield}}会有很大帮助。

因此，排序和过滤器是在大型未呈现的数组上完成的。当对大数组进行排序和过滤操作时，可见数组将使用一个小子集进行更新。这很顺利。

现在有很多快速表视图的例子。