表格性能相关
创建表格
?
一般把<table>....</table>拼成一个字符串，再以innerHTML的形式加入一个容器
?
var start = new Date().getTime(),len = 2000,arr = ['<table><tbody>'],div = document.createElement('div'),tr, td, div, i, j;for(i = 0; i < len; i++){arr.push('<tr>')for(j = 0; j < 20; j++){arr.push('<td>--1111--</td>');}arr.push('</tr>');}arr.push('</tbody></table>');div.innerHTML = arr.join('');console.log('js执行时间：' + (new Date().getTime() - start));start = new Date().getTime();document.body.appendChild(div);console.log('table渲染时间：' + (new Date().getTime() - start));?
执行效果：
?
Chrome12：100 / 10
? ?? ?FF5：78 / 4
? ? ? ? ??Safari5： 88 / 11
? ? ? ?? ?Opera11：100 / 8
? ????IE8：375 / 166
?
?
使用浏览器原生的insertRow()和insertCell()
?
var start = new Date().getTime(),len = 2000,div = document.createElement('div'),table = document.createElement('table'),tr, td;for(i = 0; i < len; i++){tr = table.insertRow(i);for(j = 0; j < 20; j++){td = tr.insertCell(j);td.innerText = '--1111--';}}div.appendChild(table);console.log('js执行时间：' + (new Date().getTime() - start));start = new Date().getTime();document.body.appendChild(div);console.log('table渲染时间：' + (new Date().getTime() - start));?
执行效果：
?
Chrome12：180 / 8
? ?? ?FF5：235 / 2
? ??? ? ??Safari5： 112 / 11
? ? ? ?? ?Opera11：361 / 8
? ????IE8：91876 / 327
?
?
?
使用createElement()和appendChild()
?
var start = new Date().getTime(),len = 2000,div = document.createElement('div'),table = document.createElement('table'),tr, td, doc;for(i = 0; i < len; i++){tr = document.createElement('tr');for(j = 0; j < 20; j++){td = document.createElement('td');td.innerText = '--1111--';tr.appendChild(td);}table.appendChild(tr);}div.appendChild(table);console.log('js执行时间：' + (new Date().getTime() - start));start = new Date().getTime();document.body.appendChild(div);console.log('table渲染时间：' + (new Date().getTime() - start));?
执行效果：
?
Chrome12：138 / 7
? ?? ?FF5：183 / 2
? ??? ? ??Safari5： 84 / 9
? ? ? ?? ?Opera11：227 / 9
? ????IE8：3905 / 215
?
?
可见，创建表格首选第一种
?
?
表格的思考
?
在IE中，col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr的innerHTML都是只读的，总共12个标签，表格相关的就占了7个，而html, head, style, title属性很少去动态修改，剩下的frameset对于我来说基本很少用，所以可见table的限制有多大。
?
而且用表格行用tr的话，动态修改表格样式会导致渲染缓慢，如果表格行换成div，性能会明显改善
?
?
<div class="table"><div class="thead"><table><thead><th></th><th></th></thead></table></div><div class="tbody"><div class="tr"><table><tr><td></td><td></td></tr></table></div></div></div>?
?
?
?
?