JavaScript性能优化--innerHTML的感悟

从后台获取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);