Performance very slow, javascript, mustache rendering templates in a loop

Question

I'm having terrible performance problems using .append and mustache, as you can see i'm looping over events and rendering a template that i am appending in to the DOM - can anyone suggest how make this a lot more efficient, currently the app grinds to a halt in Chrome..

Anyhelp will be be very much welcome, this is a major problem for me at the moment.

_.each(currentEvents.events, function(list, index) {

    var template = "{{#.}}<div data-start-time='{{start_time}}' data-end-time='{{end_time}}' data-event-id='{{event_id}}' data-event-location-id='{{event_location_id}}' data-type-id='{{event_type_id}}' class='venue-event default-event event-type-{{event_type_id}}'>\
                    <div class='event-inner clearfix'>\
                    <div class='venue-event-type'>{{event_type}}</div>\
                    <div class='venue-event-time'>{{start_time}} - {{end_time}}</div>\
                    <div class='venue-event-title'>{{event_title}}</div>\
                    <div class='venue-event-sponsor'>{{sponsor}}</div>\
                    </div>\
                    </div>{{/.}}"

    var eventOutput = Mustache.render(template, list);
    $('[data-event-location-id=' + list.event_location_id + ']').append(eventOutput);
});

try to store eventOutput in an array, and then append everything at once.. — reyaner, Feb 26 '14 at 12:58
You must use native for loop (_.each is very slow in case of performance) — Farkhat Mikhalko, Feb 26 '14 at 12:59
what if you move your `var template` outside of _.each loop. i think in every loop it is getting processed. — Jai, Feb 26 '14 at 13:00

Shahar Shokrani · Answer 1 · 2018-07-22T19:28:32.887

The var template should be init outside the loop (only once!):

var i, eventLength=currentEvents.events;    
var template = "{{#.}}<div data-start-time='{{start_time}}' data-end-time='{{end_time}}' data-event-id='{{event_id}}' data-event-location-id='{{event_location_id}}' data-type-id='{{event_type_id}}' class='venue-event default-event event-type-{{event_type_id}}'>\
                <div class='event-inner clearfix'>\
                <div class='venue-event-type'>{{event_type}}</div>\
                <div class='venue-event-time'>{{start_time}} - {{end_time}}</div>\
                <div class='venue-event-title'>{{event_title}}</div>\
                <div class='venue-event-sponsor'>{{sponsor}}</div>\
                </div>\
                </div>{{/.}}";

This mustache parse method helps speeds up future uses of render method (documentation):

Mustache.parse(template);

using _.each or forEach it more expensive than the native for loop (pay attention that I didn't use the currentEvents.events.length expression in the for condition - cause we prefer it to be calculated only once):

for (i = 0 ; i < eventLength ; i++ ) {    
    outPutArray.push(Mustache.render(template, list));
});

For this line to work you should change your flow design, from this jquery selector i can see your ids are already has been appended inside the DOM, and now you only go and append to each one o them the relevent HTML, this is wrong, you should have do the appending process to the ids which we can not see in your code and make it work togheder with the appending of the additional markup. like:

$('#parent-div').append(outPutArray.join(" "));

All code together:

var i, eventLength=currentEvents.events;    
var template = "{{#.}}<div data-start-time='{{start_time}}' data-end-time='{{end_time}}' data-event-id='{{event_id}}' data-event-location-id='{{event_location_id}}' data-type-id='{{event_type_id}}' class='venue-event default-event event-type-{{event_type_id}}'>\
                <div class='event-inner clearfix'>\
                <div class='venue-event-type'>{{event_type}}</div>\
                <div class='venue-event-time'>{{start_time}} - {{end_time}}</div>\
                <div class='venue-event-title'>{{event_title}}</div>\
                <div class='venue-event-sponsor'>{{sponsor}}</div>\
                </div>\
                </div>{{/.}}";
Mustache.parse(template);
for (i = 0 ; i < eventLength ; i++ ) {    
    outPutArray.push(Mustache.render(template, list));
});
$('#parent-div').append(outPutArray.join(" "));

*“the push method a lot expesive than the array[i] = value assign operator”* That’s not true. — Ry-, Jul 18 '18 at 04:17
check this: https://stackoverflow.com/questions/21034662/why-push-method-is-significantly-slower-than-putting-values-via-array-indices-in — Shahar Shokrani, Jul 18 '18 at 05:58
Did you read the answer to that explaining why the test was wrong? — Ry-, Jul 19 '18 at 01:08

Performance very slow, javascript, mustache rendering templates in a loop

1 Answers1