CompositeView slowly processes objects for a large set of Marionette results

Question

I am currently working on a project using .NET MVC on the back panel and Backbone (v1.1) with Marionette JS (v1.8.5) on the front panel, and I am experiencing some performance issues when trying to render a composite view with 200 results or representations.

I first encountered this starting point of a similar problem that helped me get a newer version of the puppet (v1.8.5).

Handlebars templates are used to display the html table with each itemView that is wrapped in tbody (this has a more complex look of the accordion in it, so tbody is used, not the more semantic tr)

The Composite view is initialized and displayed in the Marionette area when its sub-application is initialized.

Here is a simplified version of my code.

Active application

'use strict';

App.module('Activities', function(){
    this.startWithParent = false;
});

App.addRegions({
    RegionActivities: '#region-Activities' // <= this lives in .NET View of project
});

App.Activities.addInitializer(function (options) {

    var module = this,
        activities = new Collections.Activities();

    module.activitiesView = new Views.ActivitiesView({
        collection: activities
    });

    App.RegionActivities.show(module.activitiesView);

    activities.fetch();

});

Activities Composite View

'use strict';

Views.ActivitiesView = Backbone.Marionette.CompositeView.extend({

    template: Handlebars.templates['activities/activities'],

    itemView: Views.ActivityView,

    itemViewContainer: '.admin-table--activities', // <= html table that items are appended to

});

View Activity Items

'use strict';

Views.ActivityView = Backbone.Marionette.ItemView.extend({

    template: Handlebars.templates['activities/activity'],

    tagName: 'tbody'

});

I read Marionette Docs in a more efficient piece of paper

So the performance issue that I ran into is that all 200 elements are added one at a time and do not use the docFragment buffer. Through debugging, I believe this is because the view is created with an empty Activities collection before being retrieved, so Marionette thinks I'm updating the collection and setting isBuffering to false.

I also tried to set the ActivityView activity inside a successful selection callback, for example:

activities.fetch({
    success: function(newCollection) {
        module.activitiesView = new Views.ActivitiesView({
            collection: newCollection
        });

        App.RegionActivities.show(module.activitiesView);
    }
});

200 elBuffer ( 4 ), 50 , - . , onShow, , , .

- ?

?

, ?

, .

.

, .

CompositeView

<table class="admin-table admin-table--accordion admin-table--activities">

    <colgroup>
        <col width="10%">
        <col width="22%">
        <col width="23%">
        <col width="23%">
        <col width="22%">
    </colgroup>

    <thead>
        <tr>
            <th>Type</th>
            <th>Vessel</th>
            <th>Activity</th>
            <th>Information</th>
            <th>Review Status</th>
        </tr>
    </thead>

</table>

Activity ItemView ( tbody)

<tr class="table-title">
    <td>Col 1 data</td>
    <td>Col 2 data</td>
    <td>Col 3 data</td>
    <td>Col 4 data</td>
    <td Col 5 data</td>
</tr>

<tr class="table-content">
    <td colspan="5">More info in here...</td>
</tr>

Update

hrome dev tools javascript :

-3 Marionette triggerMethod, 80% CPU.

: http://i.stack.imgur.com/JjT3Z.png

Answer 1

, reset,

activities.fetch({reset: true});

- , ( / promises) .