使用JS创建table的高效方法

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

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

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

 

Java代码 复制代码  收藏代码
  1. StringBuilder html = new StringBuilder("<table width='100%'>");   
  2.   
  3. for(int i = 0; i < 1000; i++) {   
  4.     html.append("<tr>");   
  5.     for(int j = 0; j < 10; j++) {   
  6.         html.append("<td>kkkkkkkk</td>");   
  7.     }   
  8.     html.append("</tr>");   
  9. }   
  10. 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代码 复制代码  收藏代码
  1. 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代码 复制代码  收藏代码
  1. <BODY>   
  2.   <table width="100%" >   
  3.     <tbody id="_table">   
  4.     </tbody>   
  5.   </table>   
  6. </BODY>   
  7.   
  8. <SCRIPT LANGUAGE="JavaScript">   
  9. <!--   
  10. var _row;   
  11. var _cell;   
  12.   
  13. for(var i = 0; i < 1000; i++) {   
  14.     _row = document.getElementById("_table").insertRow(0);   
  15.     for(var j = 0; j < 10; j++) {   
  16.         _cell = _row.insertCell(0);   
  17.         _cell.innerText = "222";   
  18.     }   
  19. }   
  20. //-->   
  21. </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代码 复制代码  收藏代码
  1. <BODY>   
  2.   <table width="100%" >   
  3.     <tbody id="_table">   
  4.     </tbody>   
  5.   </table>   
  6. </BODY>   
  7.   
  8. <SCRIPT LANGUAGE="JavaScript">   
  9. <!--   
  10. var _row;   
  11. var _cell;   
  12.   
  13. for(var i = 0; i < 1000; i++) {   
  14.     _row = document.createElement("tr");   
  15.     document.getElementById("_table").appendChild(_row);   
  16.     for(var j = 0; j < 10; j++) {   
  17.         _cell = document.createElement("td");   
  18.         _cell.innerText = "222";   
  19.         _row.appendChild(_cell);   
  20.     }   
  21. }   
  22. //-->   
  23. </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代码 复制代码  收藏代码
  1. <SCRIPT LANGUAGE="JavaScript">   
  2. <!--   
  3. var _table = document.getElementById("_table");   
  4. var _row;   
  5. var _cell;   
  6.   
  7. for(var i = 0; i < 1000; i++) {   
  8.     _row = document.createElement("tr");   
  9.     document.getElementById("_table").appendChild(_row);   
  10.     for(var j = 0; j < 10; j++) {   
  11.         _cell = document.createElement("td");   
  12.         _cell.innerText = "222";   
  13.         _row.appendChild(_cell);   
  14.     }   
  15. }   
  16. //-->   
  17. </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秒。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值