mardi 30 juin 2015

EmberJS large arrays and intensive functions block the UI

When a handlebars template that uses {{#each}} to iterate over a large array which is populated by a CPU intensive computed property, what are some possible solutions to prevent the UI from being frozen until EmberJS has finished all of its render queue tasks?

For example:

//template.hbs

{{#each obj in objects}} // objects is a computed prop. returning large array
   ...some html
{{/each}}

I have run the profiler and I think I have optimized the computed property as much as I can - EmberJS itself is where the browser is spending the vast majority of its time at this point.

Currently what is happening is that the UI freezes while EmberJS deals with all of the jobs in its work queues. When all of that is complete, the DOM populates. What I'm hoping is possible is to force the DOM to render the objects in that array say 100 or 1000 at a time, before ALL the jobs in the queues are finished, appending the views to the DOM every so often, so that the user at least sees something happening.

I suppose pagination might be one possible route to go, but that gets tricky because this particular page is a report that is doing calculations to get aggregate numbers on a decent chunk of data. Paginating wouldn't really help because I need the numbers to represent the entire dataset accurately.

I've also looked into this project: http://ift.tt/1bCkVfU, but implementing that would not be an insignificant amount of work.




Aucun commentaire:

Enregistrer un commentaire