innerHTML导致CPU长时间占用

function getScheculTable() {
var beginHour = 7;
var endHour = 22;
var timeInter = 30;
var howHalf = (endHour - beginHour)*2;
var srcTbl = document.getElementById("srcData");
d = new Date();
tmpd = new Date();
d.setHours(beginHour,timeInter);
var b,e;
var tbody = document.createElement("TBODY");
for(var i=1;i<howHalf;i++) {
d.setHours(beginHour,i*timeInter);
tmpd.setHours(beginHour,i*30+30);
b = (d.getHours()<10?"0"+d.getHours():d.getHours()) + ":" + (d.getMinutes()==0?"00":d.getMinutes());
e = (tmpd.getHours()<10?"0"+tmpd.getHours():tmpd.getHours()) + ":" + (tmpd.getMinutes()==0?"00":tmpd.getMinutes());
var row = document.createElement("TR");
var cell = document.createElement("TD");
cell.innerText = b+"-"+e;
cell.width = "25%"
row.appendChild(cell);
for(var n=0;n<5;n++) {
var cell = document.createElement("TD");
cell.width = "15%"
var div = document.createElement("DIV");
div.contentEditable = true;
div.style.width="100%";
cell.appendChild(div);
//cell.innerHTML = "<DIV CONTENTEDITABLE align=center STYLE='height: 100%; width: 100%;'>"
row.appendChild(cell);
}
tbody.appendChild(row);
}
srcTbl.appendChild(tbody);

}

见上面注释掉的一行cell.innerHTML = "<DIV CONTENTEDITABLE align=center STYLE='height: 100%; width: 100%;'>"
当我在BODY的onload里面掉用此方法时，发现电脑的CPU占用率居然直线上涨，最后才发现，原来当你对一个元素的innerHTML进行替换时，会占用大量的CPU时间，后来改用appendChild的方法，才使CPU降了下来，而前者CPU占用率是72%左右，后者的CPU占用率在30%左右