从后台获取JSON(大量表格数据),到前台展示的方式有几种,效率是不同的。
目前自己使用最多的就是利用字符串的+=方式实现(如通话记录的列表)
参考实验:
目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号
方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。(最慢)
方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。
方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串(次慢)
方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。
运行时间比较:
方法 | 运行时间(ms) |
方法一 | 93037 |
方法二 | 3341 |
方法三 | 2795 |
方法四 | 500 |
function createTable4() {
var data = new Array();
data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');// 循环累加采用数组的push方法,比字符串的+=效率高!
}
data.push('</tr>');
}
data.push('</tbody><table>');
document.getElementById('table1').innerHTML = data.join(''); // 使用join生成最终字符串
}
测试运行时间的方法:
function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1); //求时间差!
}
showFunctionRunTime(createTable4);