Geek asks and answers

Destroying CollectionView rendering to avoid blocking UI thread

I would like to change the update rendering schedule CollectionView(created {{each}}) so that the large insert does not block the user interface flow for a long time. Ideally, I would like to display as many elements as I can, for example, in 50 ms, and then transfer control back to the user interface stream and set a timeout to continue further rendering. There seems to be some way in Ember to implement custom visualization buffer behavior, but I'm not sure where to start.

Here's a jsfiddle example showing how to enter 500 items into a list blocking a user interface thread:

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

+5
source share
1 answer

I would like to find a better way to do this, but 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 can improve this only by maintaining a list of the contents of the elements that will be in the viewport. I like your idea of ​​connecting to the rendering function of the CollectionView itemViewClass and allowing only a certain number of views.

+2
source

More articles:


All Articles