性能很慢，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>{{/.}}";

这种 mustache 解析方法有助于加快渲染方法的未来使用速度 (documentation)：

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