性能非常慢，JavaScript，小胡子渲染模板循环播放

Question

我在使用.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);
});

Answer 1

var template应在循环外进行初始化（仅一次！）：

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

这种胡子解析方法有助于加快将来对render方法（ 文档 ）的使用：

Mustache.parse(template);

使用_.each或forEach比本地for循环更昂贵（请注意，我没有在for条件中使用currentEvents.events.length表达式-因为我们更喜欢只计算一次）：

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

为了使这一行正常工作，您应该更改流程设计，从这个jquery选择器中，我可以看到您的ID已经被附加到DOM中，现在您只需要向其每个添加相关的HTML，这是错误的，您应该对我们在代码中看不到的ID进行附加过程，并使其与附加标记一起使用。 喜欢：

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