报表性能相关 _Web前端

表格性能相关

创建表格

一般把<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>