本来是想测试一下使用Javascript生成一个比较大的表格，大概需要多长时间，一直认为这会是一个比较固定的时间。期间用了几种不同的方法，
发现效率相差太大了。下面是测试的具体说明：
目标：
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号
方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用
innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode
方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
运行时间比较:
| 方法 |
运行时间(ms) |
| 方法一 |
93037 |
| 方法二 |
3341 |
| 方法三 |
2795 |
| 方法四 |
500 |
具体的程序如下：
<html>
<head>
<title>test page</title>
<script type='text/javascript'>
<!--
function createTable() {
var t = document.createElement('table');
for (var i = 0; i < 2000; i++) {
var r = t.insertRow(0);
for (var j = 0; j < 5; j++) {
var c = r.insertCell(0);
c.innerHTML = i + ',' + j;
}
}
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable2() {
var t = document.createElement('table');
var b = document.createElement('tbody');
for (var i = 0; i < 2000; i++) {
var r = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var c = document.createElement('td');
var m = document.createTextNode(i + ',' + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}
t.appendChild(b);
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable3() {
var data = '';
data += '<table border=1><tbody>';
for (var i = 0; i < 2000; i++) {
data += '<tr>';
for (var j = 0; j < 5; j++) {
data += '<td>' + i + ',' + j + '</td>';
}
data += '</tr>';
}
data += '</tbody><table>';
document.getElementById('table1').innerHTML = data;
}
function createTable4() {
var data = new Array();
data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');
document.getElementById('table1').innerHTML = data.join('');
}
function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1);
}
//-->
</script>
</head>
<body>
<div id="table1" style="border: 1px solid black">
</div>
<script>
showFunctionRunTime(createTable);
showFunctionRunTime(createTable2);
showFunctionRunTime(createTable3);
showFunctionRunTime(createTable4);
</script>
</body>
</html>
分享到：
相关推荐
下面将详细解析关于如何使用JavaScript实现动态创建表格和增加表格行数的相关知识点。 ### 知识点一：使用`document.write()`和`document.createElement()` 在提供的代码示例中，`document.write()`和`document....
在IE中，使用`document.createElement()`创建表格元素，`appendChild()`或`insertBefore()`添加到已有元素中，可能需要特别处理IE的特例。 4. **事件处理**： - IE对事件处理函数的支持与非IE浏览器不同。例如，IE...
在JavaScript中，动态创建表格和添加数据是一项基本的前端开发技能。这主要涉及到DOM操作，包括元素的创建、属性设置以及向文档中插入元素。以下是对两种不同方式的详细解释，这两种方式都适用于非IE6浏览器，同时也...
在实际应用中，可能还需要考虑浏览器兼容性问题，因为不同的浏览器（尤其是IE和其他现代浏览器）对某些JavaScript方法的支持可能存在差异。为了确保代码的广泛兼容性，建议使用像jQuery这样的库，它们提供了跨浏览器...
本文将深入探讨如何利用JavaScript动态生成HTML页面元素，包括使用innerHTML属性和DOM（Document Object Model）方法两种主要方式，以及在不同浏览器环境下的兼容性问题。 ### 1. 使用innerHTML属性 `innerHTML`...
1. **动态创建表格**：在JavaScript中，我们可以使用`document.createElement()`方法动态创建`<table>`元素，然后通过`innerHTML`或`appendChild()`添加表格行`<tr>`和单元格`<td>`。这种方式灵活且便于程序控制，...
本教程将深入探讨如何使用jQuery实现动态更改table表格数据，让你的网页表格具有实时编辑功能，提升用户体验。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始，包含若干个`<tr>`（行）...
通过上述介绍，我们了解到使用 JavaScript 实现动态增加删除表格行的方法，并且能够确保其在不同的浏览器中都能正常工作。这种方法不仅提高了网页的交互性，还增强了用户体验。此外，通过合理的代码设计和兼容性处理...
不同浏览器对某些CSS属性和JavaScript API的支持可能存在差异，因此需要进行兼容性检查和处理。例如，老版本的IE浏览器可能不支持CSS3的`resize`属性，这时可能需要使用JavaScript库来模拟。 6. **性能优化**： ...
至于表格展示，HTML `<table>` 元素和JavaScript可以创建动态的差异展示。创建一个表格并根据差异填充： ```javascript function displayDiffInTable(diff) { var table = document.createElement('table'); var ...
《阿赖实用javascript控件程序及教程》是一份详尽的资源，旨在帮助开发者深入理解和应用JavaScript技术，特别是在创建交互式网页元素如目录树、菜单和WEB表格方面。JavaScript是一种强大的客户端脚本语言，它在网页...
- 创建新行：可以使用jQuery的.append()方法来向表格中添加新的元素，然后创建对应的元素以填充数据。 - 删除行：利用.remove()或.detach()方法可以删除选定的行，这两种方法的区别在于前者会从DOM中彻底移除元素...
本教程将讲解如何在VC++中利用DHTML技术来创建表格，从而实现动态报表。 首先，我们需要理解DHTML的核心概念。DHTML通过JavaScript来操作DOM（Document Object Model），这个模型是HTML文档的结构化表示，允许我们...
使用JavaScript，我们可以根据需求在运行时动态地向表格中添加行。通常涉及以下步骤： 1. 获取表格对象：通过DOM（Document Object Model）接口，如`document.getElementById`或`document.querySelector`来获取`...
8. **浮动元素清除**：对于跨浏览器的浮动元素清除，可以使用JavaScript动态添加清除类，避免使用`clearfix` hack。 9. **渐进增强与优雅降级**：利用JavaScript进行功能检测，对支持新特性的浏览器提供增强体验，...
总的来说，"jquery 固定表格标题和列"是一个提高网页数据展示体验的实用解决方案，它结合了jQuery的便利性、HTML与CSS的布局功能以及JavaScript的动态处理能力，实现了在滚动时保持表格标题和列固定的高效方法。...
在本文中，我们将深入探讨如何在ExtJS框架中实现表格单元格的合并，以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库，用于构建富客户端应用程序，其表格组件是功能丰富的数据展示工具...
创建日历需要动态地添加或修改DOM元素，例如创建一个表格来展示月份和日期。 2. **事件处理**：日历通常响应用户的点击事件，比如点击某一天或者切换月份。这些事件需要使用addEventListener或attachEvent（IE浏览...
在Web开发中，JavaScript经常被用来动态控制表单元素、选择框以及表格等DOM元素的行为。 - **Form对象** - `onsubmit`: 在提交表单时调用的事件句柄。当用户点击表单中的Submit按钮时，会触发此事件。 ```...