Backbone Marionette Composite View Rendering

Question

Problem in short: Initializing a composite view in marionette with a collection of size ~500 stalls the app for around a minute.

I'm building a backbone marionette app to maintain a list of items. When testing with a collection size of ~50 everything is fine. When the limit grows, app goes unresponsive.

Store.ItemsListView = Marionette.CompositeView.extend({
        tagName: "div",
        template: "#items-list",
        itemView: Store.ItemView,
        itemViewContainer: "tbody",
        emptyView: Store.NoDataView,
});

Store.ItemView = Marionette.ItemView.extend({
    tagName: "tr",
    template: "#store-item"
});

I understand it is mainly due to DOM interactions [CPU profiled javascript in the app page]. I tried optimizing on the template side by caching the compiled template's source instead of DOM reference in itemView. But no significant improvement.

I thought of using ItemView itself to render the collection as mentioned here. As it appends the final html src to the el. But my logic in application isn't allowing to do so.

What are other elegant ways to get rid of issues like this? Pagination is obviously one of them.. But I have a feeling that it could be handled in a better way.

Tamil Tamil · Accepted Answer · 2014-03-06T10:56:59

Finally after quite a lot of search found CollectionView.reset performance issue on Marionette Github. It is evident that this issue is resolved and released in 1.3.x version of Marionette and realized that there is some bug in my app instead of Marionette.

Further debugging on the same gave me a hint that endBuffering was called for each and every model in the collection instead of once for all after fetch.

So, the issue was instead of reset event, add event was getting triggered at my collection level. Later came to know that there is reset option in fetch which needs to be set.

Now things are 99% faster as the perf test says.

Backbone Marionette Composite View Rendering

2 Answers