项目开发中,为了提高用户体验,查询时使用dwr向后台发送查询请求,然后根据查询结果异步更新页面中table的内容。
第一次现实方法是用Java代码将查询到的数据拼凑HTML(就图用java写代码比js方便,呵呵),将拼凑到的HTML返回到前台,前台JS将获取到的HTML字符串赋值给div的innerHTML属性(table被放置在一个div内),代码如下(这里所有的例子都是简单的模拟下我的代码而已):
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");
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代码如下(这里所有的例子都是简单的模拟下我的代码而已):
<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:
<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>
<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秒。
分享到:
相关推荐
在网页开发中,表格(Table)是展示数据的常用元素,而JavaScript(js)则提供了强大的功能来操作DOM(文档对象模型),包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行,...
本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格,以解决类似的问题。 首先,`vxe-table`是一个功能强大的表格组件,相比Element UI的`el-table`,它提供了更多高级特性,如动态渲染、高性能以及...
总结起来,"dwr城市选择的联动,util.js方法的使用,动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用,可以创建出高效、实时的Web应用,满足用户对...
总的来说,`bootstrap-table`结合`bootstrap-editable`插件,提供了一种高效的方法来创建交互式、功能丰富的表格,特别是当需要在表格中实现下拉框编辑时。这种技术在数据管理、报表展示和用户输入场景中非常有用,...
总的来说,Bootstrap Table Editable JS 提供了一种高效且用户友好的数据管理解决方案,尤其适用于需要在前端进行数据编辑和管理的应用场景。通过灵活的配置和丰富的API,开发者可以定制出满足特定需求的表格,提升...
Bootstrap Table是一款基于Bootstrap框架的动态数据表格插件,它提供了丰富的功能,如排序、过滤、分页、自定义列等,极大地...同时,不断学习和理解Bootstrap Table的API和配置选项,将有助于你更高效地使用这个工具。
- **初始化表格**:在JavaScript中,找到需要排序的表格元素,并调用`js-table-sorter`的初始化方法,如`table.init()`。 - **配置选项**:`js-table-sorter`提供了丰富的配置项,可以设置默认排序列、排序方向、...
`js-table`可能是指一个专门处理JavaScript表格和分页的库,虽然没有提供具体的库名称,但我们可以探讨一下JavaScript中实现表格分页的一般方法和相关的Java知识点。 在前端开发中,JavaScript通常用于创建动态和...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于Web应用程序之间传递数据。在前端开发中,我们经常需要将从...了解和掌握这个库的使用方法,将有助于你在实际项目中更有效地处理数据展示。
EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...
2. **创建表格结构**:接着,使用`append()`方法创建表格的基本结构,包括`<table>`、`<thead>`、`<tbody>`等元素。在`<thead>`中,可以创建表头`<th>`来表示数据列的名称。 3. **创建行和单元格**:在`<tbody>`内...
可以使用`document.createElement`方法创建`<table>`、`<thead>`、`<tbody>`等元素,并通过`innerHTML`设置单元格内容。同时,我们需要处理合并相同项的问题,这可以通过计算`rowspan`属性来实现。以下是一个简单的...
这里涉及到数组的排序算法,例如冒泡排序、选择排序或快速排序,但考虑到性能,可以使用JavaScript内置的`sort`方法,它接受一个比较函数作为参数。 比较函数应根据表格数据类型进行设计。如果数据是数字,可以直接...
本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML `<table>`元素的基本结构。一个表格由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)组成。在JavaScript中,我们...
JavaScript清空table表格的方法 在开发Web应用时,经常需要对表格数据进行动态操作,包括清空表格中的所有数据。在JavaScript中,可以通过多种方法来清空一个HTML的table元素。本文将详细介绍几种常见的清空table...
在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义,每...
1. **创建表格**:首先,你需要在HTML中设置一个空的表格容器,然后使用JavaScript创建表格元素。 ```javascript var table = document.createElement('table'); var thead = document.createElement('thead'); var...
最后,我们使用`appendTo()`方法将新创建的行添加到表格的tbody部分。 通过这种方式,我们可以利用jQuery动态地生成表格,而无需在HTML中硬编码数据。这种方法的优点在于,当数据源发生变化时,只需更新JavaScript...
在JavaScript中,我们可以创建一个新的XMLHttpRequest实例,然后设置其请求方法(GET或POST)、URL、以及是否异步执行。当请求发送到服务器后,我们可以通过监听`onreadystatechange`事件来处理服务器的响应。当`...
### JavaScript 动态生成 Table 及处理 在现代 Web 开发中,动态生成 HTML 元素是一种非常实用的技术,尤其当涉及到数据展示时,如表格(`<table>`)。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...