rendering part of a large list smoothly with Ember.js

Asked By: Anonymous

I’m looking for a way to smoothly render a large “part” of the list.
The list is huge now 1.000 items.(test set) I’ve figured out that the rendering of this list takes the most time. Not the sorting and filtering I’m doing on it.
When I render/view the entire list at once the browser locks until it’s done.

What can I do to speed up the rendering?

Should I use pagination? Is there a way to smoothly scroll over the list, and only render part of the list that is visible. what events should i listen to? example code?

Solution

Answered By: Anonymous

I wanted to comment instead of answering, but I don’t have the rep for that (which seems backwards). Anyway,

First, Define “huge” list. How many rows?

Second, define “render”. Do you just need to spit out the HTML as fast as possible, or do you need to generate a data-bound view?

In my experience, the fastest way to generate HTML is to push strings to an array, e.g.

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

So if you want maximum performance, this is the way to go. You can use this technique with an ember view by simply overriding the render() method. Of course, you lose data binding, which is the coolest part of ember. If you need data binding, but only on a few fields, you might be able to improve performance to a satisfactory level by turning off data binding where it’s not needed with the unbound helper:

{{unbound myfield}}