3

When it comes to rendering a large list of items on the client-side, what are my options with Ember.js? Pagination comes to mind as an obvious way to decrease the rendering time, but are there any other tricks that allow you to render a big list of items without that noticeable browser freeze as the javascript executes?

Josh Rickard
  • 1,563
  • 2
  • 16
  • 29
  • 2
    I'm having slow loading performance with 850 items. And im running more than average hardware running chrome. I expected it to be fast. – Stephan Jan 31 '12 at 09:50
  • 2
    I've updated my ember.js from github and now speed as incresed A LOT, mine where like 6 months old or something. And a lot has hapened meanwhile. – Stephan Jan 31 '12 at 12:03
  • Locking up of the browser is mainly caused by the rendering. – Stephan Feb 01 '12 at 11:49
  • @Stephan, thanks for the pointer. Going even from just 0.9.5 => 0.9.6 had a noticeable performance boost. – mkoistinen Apr 17 '12 at 14:50
  • I just render some 50 items or so (though each one has many parts and bindings).. it freezes for 2-3 seconds. That isn't acceptable. Isn't there any way to tell emberjs to render few items, then go on processing your bindings for others, then render them.... Or if its just the rendering that takes long, there should be a way to avoid browser freeze by rendering in parts. Anyone has clues? – Kazim Zaidi Apr 20 '12 at 05:09
  • EmberJs still have huge speed issues in version 0.9.8. Rendering a big list of items take about 3-5 times more than with knockout or backbone. Not much we can do about it for now beside monitoring speed improvements. – AlexG May 24 '12 at 17:49
  • 1
    Check out https://github.com/emberjs/list-view – Christopher Manning Mar 18 '13 at 19:02

2 Answers2

2

ember-list-view for lists

ember-table for tables

I tried a million different ways of rendering lists and templates without these to no avail, so hopefully this helps someone.

blisstdev
  • 582
  • 2
  • 13
0

I found a similar performance issue when rendering large lists.

My use cases is to render log entries. I ended up using jQuery and writing directly to the DOM.

Here's a post on how I did it and here's the code.

To cut a long story short, I get 50 records and render them on the screen. At the bottom of the screen, I have a Show More button. If the user clicks this, I append the next 50 of the bottom of the list.

Note that my records are read only. If I had to perform CRUD operations, I would revert to using collections with paging. Collections provide binding support so when the user edits a record, the fields in the list will automatically get updated. Here's the post on CRUD operations.

My code is still using Sproutcore 2 before it was renamed to EmberJS. I think you will find most of the API are the same - just the namespace needs changing.

Hope this helps.

Veebs
  • 2,402
  • 13
  • 10