制作表格的效率之天壤之别

下面给出三段运行结果完全相同的代码，作用都是创建一个10x1000的表格，运行效率确有天壤之别。

/**//* 测试代码1 - 耗时：41秒 */
var table = document.createElement("TABLE");
document.body.appendChild(table);
for(var i=0;i<1000;i++){
var row = table.insertRow(-1);
for(var j=0;j<10;j++){
var cell = row.insertCell(-1);
cell.innerText = "("+i+","+j+")";}}

/**//*测试代码2 - 耗时：7.6秒*/
var table = document.createElement("TABLE");
document.body.appendChild(table);
var tbody = document.createElement("TBODY");
table.appendChild(tbody);
for(var i=0;i<1000;i++){
var row = document.createElement("TR");
tbody.appendChild(row);
for(var j=0;j<10;j++){
var cell=document.createElement("TD");
row.appendChild(cell);
cell.innerText = "("+i+","+j+")";}}

/**//*测试代码2 - 耗时：1.26秒*/
var tbody = document.createElement("TBODY");
for(var i=0;i<1000;i++){
var row = document.createElement("TR");
for(var j=0;j<10;j++){
var cell=document.createElement("TD");
cell.innerText = "("+i+","+j+")";
row.appendChild(cell);}
tbody.appendChild(row);}
var table = document.createElement("TABLE");
table.appendChild(tbody);
document.body.appendChild(table);

这里代码1和代码2之间的差别在于创建表格单元时使用了不同的API方法。而代码2和代码3差别在于处理顺序略微不同。
我们无从分析代码1和代码2之间如此大的性能差别。目前所知的是insertRow和insertCell是DHTML中表格特有的API。
createElement和appendChild是w3c DOM 的原生API.而前者应该是对后者的封装。不过，我们不能因此而得出结论认为
DOM的原生API总是优先于对象特有的API.

每当我们将一个对象添加到网页中时，浏览器都会尝试对页面中的控件布局进行重新计算。这就可以解释代码2和代码3的效率差别。我们能够首先在内存中将真个要构造的对象全部创建好，然后再一次性地添加到网页中，那么，浏览器将只会做一次布局的重计算。

计算时间方法:
var d1 = new Date();
var d2 =new Date();
span = d2.getTime() - d1.getTime() + "milliseconds";

转载于:https://www.cnblogs.com/sw22225458/archive/2008/01/04/1025919.html