使用JS创建table的高效方法

最新推荐文章于 2023-07-03 17:13:39 发布

猥琐程序员

最新推荐文章于 2023-07-03 17:13:39 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

http://hotpepper.iteye.com/blog/235902

项目开发中，为了提高用户体验，查询时使用dwr向后台发送查询请求，然后根据查询结果异步更新页面中table的内容。

第一次现实方法是用Java代码将查询到的数据拼凑HTML（就图用java写代码比js方便，呵呵），将拼凑到的HTML返回到前台，前台JS将获取到的HTML字符串赋值给div的innerHTML属性（table被放置在一个div内），代码如下（这里所有的例子都是简单的模拟下我的代码而已）：

Java代码

StringBuilder html = new StringBuilder("<table width='100%'>");
for(int i = 0; i < 1000; i++) {
html.append("<tr>");
for(int j = 0; j < 10; j++) {
html.append("<td>kkkkkkkk</td>");
}
html.append("</tr>");
}
html.append("</table");

StringBuilder html = new StringBuilder("<table width='100%'>");for(int i = 0; i < 1000; i++) {	html.append("<tr>");	for(int j = 0; j < 10; j++) {		html.append("<td>kkkkkkkk</td>");	}	html.append("</tr>");}html.append("</table");

Js代码

document.getElmentById(“_div”).innerHTML = html;

document.getElmentById(“_div”).innerHTML = html;

结果当表的字段数为10，记录数为1000时，IE响应异常缓慢，而且CPU占用率奇高，但等了10－20分钟后（如果只是纯文本还好些，如果其中包含其它HTML元素，如img、div、checkbox等等，响应的时间更多），页面最终还是生成出来了，但再多发几次查询请求，IE所占的内存不断的升高，一直不释放，直到重新刷新页面后内存才会降下来。

上网查了些资料，发现使用innerHTML来更换页面元素时，IE并没有释放替换前的元素所占用的内存，从而存在潜在的IE内存泄露的隐患，尤其是在页面使用innerHTML进行大量的元素替换操作时。

既然上面的方式存在性能问题，只好换个方式，将后台查询到的数据使用List来表示记录行，用Map来表示字段内容，并通过dwr返回到前台转换成javascript的Array、Object对象，然后用JS的insertRow、insertCell方法来往table中插入tr、td，JS代码如下（这里所有的例子都是简单的模拟下我的代码而已）：

Js代码

<BODY>
<table width="100%" >
<tbody id="_table">
</tbody>
</table>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var _row;
var _cell;
for(var i = 0; i < 1000; i++) {
_row = document.getElementById("_table").insertRow(0);
for(var j = 0; j < 10; j++) {
_cell = _row.insertCell(0);
_cell.innerText = "222";
}
}
//-->
</SCRIPT>

<BODY>  <table width="100%" >	<tbody id="_table">	</tbody>  </table></BODY><SCRIPT LANGUAGE="JavaScript"><!--var _row;var _cell;for(var i = 0; i < 1000; i++) {	_row = document.getElementById("_table").insertRow(0);	for(var j = 0; j < 10; j++) {		_cell = _row.insertCell(0);		_cell.innerText = "222";	}}//--></SCRIPT>

使用这种方式，当数据量比较大时其响应速度还是其慢，IE几乎挂死。

没有办法，只好再另辟途径，这次使用document.createElement()方法来创建tr、td：

Js代码

<BODY>
<table width="100%" >
<tbody id="_table">
</tbody>
</table>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var _row;
var _cell;
for(var i = 0; i < 1000; i++) {
_row = document.createElement("tr");
document.getElementById("_table").appendChild(_row);
for(var j = 0; j < 10; j++) {
_cell = document.createElement("td");
_cell.innerText = "222";
_row.appendChild(_cell);
}
}
//-->
</SCRIPT>

<BODY>  <table width="100%" >	<tbody id="_table">	</tbody>  </table></BODY><SCRIPT LANGUAGE="JavaScript"><!--var _row;var _cell;for(var i = 0; i < 1000; i++) {	_row = document.createElement("tr");	document.getElementById("_table").appendChild(_row);	for(var j = 0; j < 10; j++) {		_cell = document.createElement("td");		_cell.innerText = "222";		_row.appendChild(_cell);	}}//--></SCRIPT>

Js代码

<SCRIPT LANGUAGE="JavaScript">
<!--
var _table = document.getElementById("_table");
var _row;
var _cell;
for(var i = 0; i < 1000; i++) {
_row = document.createElement("tr");
document.getElementById("_table").appendChild(_row);
for(var j = 0; j < 10; j++) {
_cell = document.createElement("td");
_cell.innerText = "222";
_row.appendChild(_cell);
}
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!--var _table = document.getElementById("_table");var _row;var _cell;for(var i = 0; i < 1000; i++) {	_row = document.createElement("tr");	document.getElementById("_table").appendChild(_row);	for(var j = 0; j < 10; j++) {		_cell = document.createElement("td");		_cell.innerText = "222";		_row.appendChild(_cell);	}}//--></SCRIPT>

这时只需要2、3秒就完成了页面的刷新^_^，这是因为每次都用document.getElementById()去引用一个对象是比较耗时的，如果使用一个局部变量来引用它，在使用的地方通过局部变量来引用，则可以节省不少性能，但这种差异也只是在大循环中才比较明显。

另外，如果需要在td中创建其它HTML元素，如img、div、checkbox等等，则响应时间会再慢一些，以上面的例子，大概需要4、5秒。