性能非常慢，javascript、胡须呈现模板在循环中

我在使用.append和mustache时遇到了严重的性能问题，正如你所看到的，我正在循环事件并呈现一个模板，我正在将该模板附加到DOM中-有人能建议如何使其更高效，目前该应用程序在Chrome中陷入停顿

任何帮助都将是非常受欢迎的，这是我目前的一个主要问题

_.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);
});

var模板应仅在循环外部初始化一次！：

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>{{/.}}";

使用u.each或forEach比本机for循环更昂贵请注意，我没有在for条件中使用currentEvents.events.length表达式-因为我们希望它只计算一次：

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

所有代码一起：

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(" "));

---

尝试将eventOutput存储在数组中，然后立即追加所有内容。您必须使用本机for loop。如果将var模板移到每个循环之外，每个循环的性能都会非常慢。我认为在每个循环中它都在被处理。“push方法比array[i]=value assign操作符要昂贵得多”这不是真的。检查这个：你读过解释测试错误原因的答案了吗？

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

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(" "));