创建表格
一般把<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>