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