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


比如模板引擎 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>';
        }

哪个会更快些

模板引擎 JavaScript

633091 11 years, 10 months ago

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

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


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


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

fishman answered 11 years, 10 months ago

Your Answer