Breaking up CollectionView rendering to avoid blocking the UI thread

Question

I would like to alter the rendering schedule for updates to a CollectionView (as created by {{each}}) so that a large insertion does not block the UI thread for a long time. Ideally, I'd like to render as many elements as I can in say 50 ms, then pass control back to the UI thread and set a timeout to continue further rendering. It looks like there is some facility in Ember for implementing custom render buffer behavior, but I'm not sure where to get started with it.

Here's a jsfiddle benchmark showing insertion of 500 elements into a list blocking the UI thread for a while:

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

Answer 1

I would like to find a better way to do this, but right now I am delaying how quickly I populate the contents of the ArrayController. Here is a really dirty example.

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

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

You could improve this by only maintaining a list of content of items that would be in the viewport. I like your idea of hooking into the render function of a CollectionView's itemViewClass and only allow a certain number of views to render.