前端数据展示是模板引擎快还是原生态HTML拼接快？

Question

比如模板引擎 template.js

原生拼接：

javascript        for (i=0; i < length; i++) {
            image = data[i];

            html += '<div class="pin wfc">';
            html += '<a target="_blank" href="'+image.image+'" title="'+image.title+'">';
            html += '<img src="'+image.preview+'" width="200" height="'+Math.round(image.height/image.width*200)+'">';
            html += '</a>';
            html += '<p>'+image.title+'</p>';
            html += '</div>';
        }

哪个会更快些

Answer 1

性能的话可以自己写个用例贴到 http://jsperf.com/ 测一下。
比较模板和拼接字符串的性能没有意义，因为模板解决的不是性能问题，而是实现 HTML 和 JS 分离，大大提高了代码的可维护性，而且便于分工。在目前的硬件环境下这点拼接 HTML 字符串的性能差距可以忽略不计。

PS: 题目中的拼接可能有点性能问题，每次 += 都生成了一个新的字符串。如果真要使用字符串拼接，可以使用：

var sb = [];
sb.push('<div>');
sb.push('</div>');
var html = sb.join('');

或

var html = \
'<div>' + \
'</div>';