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);