求高人指点JS table 自增行速度的问题

Question

部分代码
  
var cellb = document.getElementById("shttd_"+dataTable.endrow+"_"+dataTable.startcol);
var tbody = document.getElementById("table_sht").tBodies[0];
var oldTr = tbody.rows[cellb.parentNode.rowIndex];
var idx = oldTr.rowIndex;   
for(var x=0;x<dalength-rowold;x++){
dataTable.datarowcount ++;  
//?????
//onInsertRow(false);
idx++;
var newTr = tbody.insertRow(idx);
var cells = oldTr.cells;
for(var i=0;i<cells.length;i++)
{
cell = cells[i].cloneNode(true);
cell.id = "0";var va=acVs[x][i+1];if (va){
if(cell.getAttribute("cpceditable")){ 
var col = getDataCol(cell.getAttribute("cpccolid"));
col.setCellValue(cell, va);
}else{
var col = getDataCol(cell.getAttribute("cpccolid"));
col.setCellValue(cell, va);
  
}
}
newTr.appendChild(cell);
}}
}
5*24的表格居然需要24秒的时间。求高人指点呀  

Answer 1

dom操作效率是很低的 应尽量避免频繁dom操作

Answer 2

http://www.cnblogs.com/aaa/articles/1358161.html

Answer 3

第一：for循环的问题
  应将循环次数提为局部变量 代替.length 
  循环中应该尽量减少对dom元素属性逐层次的访问 而应该提成局部变量 尤其是多次访问像width等这些dom布局的一些属性 会导致dom的重绘和重排。第二：对与大数据量的表格单元格插入操作
  我们通常创建文档碎片var fragment = document.createDocumentFragment()来尽量提高性能 将操 作都基于这个文档碎片 最后将文档碎片挂接到tbody上。第三：能提成局部变量的都提成局部变量 因为作用域链的最前端就是局部变量 访问较快。第四：适当修改自己的逻辑。

Answer 4

调试了一下速度慢的根源就在于下面这两句
tbody.insertRow(idx);
newTr.appendChild(cell);
先增加行然后再一列一列的追加这些的操作必然会导致速度慢。想问一下有没有其它函数可以定位到table特定的行进行追加的
但是要先生成行跟列数据信息。然后追加到tbody中。

Answer 5

问题已解决。
var newTr = tbody.insertRow(idx);
var cells = oldTr.cells;
这种方式只适应于单行增加。