ember.js - 分解 CollectionView 渲染以避免阻塞 UI 线程

Question

我想更改渲染计划以更新到 CollectionView (由 {{each}} 创建)以便大插入不会长时间阻塞 UI 线程。理想情况下，我想在 50 毫秒内渲染尽可能多的元素，然后将控制权传回 UI 线程并设置超时以继续进一步渲染。看起来 Ember 中有一些工具可以实现自定义渲染缓冲区行为，但我不确定从哪里开始使用它。

这是一个 jsfiddle 基准测试，显示将 500 个元素插入到列表中，从而阻塞 UI 线程一段时间:

http://jsfiddle.net/Ecq8g/6/

Answer 1

我想找到一种更好的方法来做到这一点，但现在我正在延迟填充 ArrayController 内容的速度。这是一个非常肮脏的例子。

http://jsfiddle.net/BsjSH/1/

for (var i = 0; i <= 999; i++) {
    Ember.run.later(function() {
        App.ArrayController.pushObject(App.Thing.create());
    }, i * 3);    
}​

您可以通过仅维护将在视口(viewport)中的项目内容列表来改进这一点。我喜欢你的想法，即 Hook 到 CollectionView 的 itemViewClass 的渲染函数，并且只允许渲染一定数量的 View 。