编程技巧 - 更快的HTML拼装 ¶

平时大家经常会这样在一个for循环里拼HTML：

var html = '';
for(var i = 0; i <= 100000; i++){
	html += '<p>' + i + '</p>';
}
$('body').html(html);

一般情况下没问题，但是如果页面上有较多的内容要渲染，特别是数组的数据量很大时，用以下方式会更快速：

var html = [];
for(var i = 0; i <= 100000; i++){
	html.push('<p>' + i + '</p>');
}
$('body').html(html.join(''));

其实就是往数组元素里追加HTML，最终将数组拼接起来

经验 ¶

由于实际上我们的页面每块数据每次渲染顶多是10到20条左右，所以无论是用加法拼装还是数组join都感知不到区别

但是如果一直保持着数组join的写法来拼的话，整体上还是能慢慢感觉到比不用join的速度快，虽然很微秒，可能是一种自我感觉而已

当然这其实能突显出代码的质量是较高的，所以如果你有一个对代码质量有要求的上司的话，那更加要保持这样写代码来讨好他了

不过从前我经历过一个项目发展三年，是一位同事分享给我用这个join的，然后我一直用，项目里面许多页面要加载的数据也越来越多，慢慢地发现我这样写的页面与其他同事用加法写的页面渲染速度确实开始有了一秒半秒的区别