原文链接：http://abaper.blogbus.com/logs/8278500.html
本来是想测试一下使用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>
分享到：
相关推荐
Java 代码实现了一个简单的文本编辑器
内容概要：本文详细介绍了如何使用MATLAB实现基于Attention机制的LSTM模型进行多特征分类预测。主要内容包括程序设计思路、代码实现、模型构建与训练、模型评估及可视化、以及简单的GUI界面设计。模型可以在多个领域应用，如金融数据分析、医疗诊断等。 适合人群：对深度学习和分类预测感兴趣的科研人员和开发人员，具备一定的MATLAB和深度学习基础。 使用场景及目标：适用于需要处理时间序列数据并进行分类预测的项目。目标是通过Attention-LSTM模型提高分类准确率，同时提供直观的可视化结果和友好的用户界面。 其他说明：文中提供了详细的代码实现和注释，读者可以通过实践加深对模型的理解。此外，还讨论了模型优化和未来的研究方向。
基于Flask和SQLAlchemy 的简易仓库管理系统源码(期末课程设计).zip 1.多数小白下载后，在使用过程，可能会遇到些小问题，若自己解决不了，请及时私信描述你的问题，我会第一时间提供帮助，也可以远程指导 2.项目代码完整可靠，谈不上高分、满分(多数为夸大其词），但难度适中，满足一些毕设、课设要求，且属于易上手的优质项目，项目内基本都有说明文档，按照操作即可，遇到困难也可私信交流 3.适用人群：各大计算机相关专业行业的在校学生、高校老师、公司程序员等下载使用 4.特别是那种爱钻研学习的学霸，强烈推荐此项目，可以二次开发提升自己。如果确定自己是学渣，拿来作毕设、课设直接用也无妨，但自己还是尽可能弄懂项目最好！
民航网上订票系统 JAVA毕业设计 源码+数据库+论文 Vue.js+SpringBoot+MySQL 系统启动教程：https://www.bilibili.com/video/BV11ktveuE2d
JAVA项目报告-闹钟的设计与实现.pdf
毕业设计论文
RJFireWall-maste真资源
内容概要：本文档详细介绍了一种基于 Java 实现的学生管理系统的构建流程，涵盖 Maven 项目的搭建、主要 Java 类的设计（如 Student、StudentManager）及其功能实现（添加学生、删除学生、查询学生、列出所有学生）。项目使用 Java 标准库进行数据处理，并借助简单的文本文件完成数据的持久化保存。 适合人群：对 Java 编程有一定基础，特别是熟悉面向对象概念的初学者或进阶开发者。 使用场景及目标：适用于想要深入理解和掌握如何利用 Java 构建小型应用的开发者；本案例可用于个人学习、教学展示或者小规模学校的初步尝试。 其他说明：该文档不仅提供了详细的代码指导，还涉及到软件工程的基本方法论，有助于提升读者的实际开发能力和技术理解水平。同时，它也是一个良好的练习项目，帮助开发者提高问题解决能力和代码质量意识。
请结合我的博客看 https://blog.csdn.net/weixin_41011452/article/details/140422263?spm=1001.2014.3001.5501
内容概要：本文档详细介绍了在CMPT459课程中的一项作业任务，即从零实现一个决策树分类器。该任务要求学生使用Python编程语言，在不借助第三方机器学习库的情况下（仅允许使用NumPy和pandas），基于提供的文件完成决策树的构建与应用。具体内容包括实现main.py, node.py 和 decision_tree.py三个核心文件，分别用于模型训练测试、节点定义以及决策树的主要方法如fit, predict, entropy等。此外，还要求提交一份实验报告，记录不同参数设置下模型的表现情况。 适合人群：适合具备Python编程基础，对数据挖掘及机器学习感兴趣的大学生或研究人员。
c语言入门C语言文件操作与输入输出
需要软件：eclipse/idea,maven环境，jdk1.8，mysql数据库 网页采用sprngboot+vue技术开发，java作为后台代码，技术用到springmvc, 所有程序保证可以运行，项目功能参考文章，如遇到运行不了请联系作者获取源码，源码制作不易， 希望多多支持给予好评。 二、项目技术 开发语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：vue+HTML 后端技术：SSM（Spring+SpringMVC+MyBatis） 前端框架：vue 三、运行环境 操作系统：Windows、macOS都可以 JDK版本：JDK1.8以上都可以 开发工具：IDEA、Ecplise都可以 数据库: MySQL5.7/8.0版本均可 小程序运行软件：微信开发者工具 Web应用服务器：7.x、8.x、9.x版本均可
fast-lio
基于 Stripformer 的快速图像去模糊的 PyTorch 实现.zip
三维重建_人体三维重建+姿态估计_优质项目分享
毕业设计论文
内容概要：本文详细介绍了参加厦门地区数学建模联合研习活动所需撰写的论文参考框架，内容涵盖了论文的基本结构和每一部分的具体写作要点。从摘要、关键词、目录到各个章节的撰写要求，以及参考文献和附录的具体规范进行了全面指导，旨在帮助参赛队伍更加系统、科学地完成数学建模竞赛论文。 适合人群：即将参与厦门地区数学建模竞赛的学生及教师，尤其是初次接触数学建模的学生。 使用场景及目标：①作为参加数学建模比赛准备阶段的学习材料；②帮助参赛团队更好地理解和掌握数学建模论文的写作技巧与规范。 其他说明：文中强调了模型假设、模型建立与求解、模型检验、模型评价等多个环节的重要性，鼓励学生在实践中灵活运用，确保论文质量。同时，提供了参考文献的书写标准及具体案例，以便选手查阅并正确引用。
【摘要】通过参与计算机编程实践项目，学生能将课堂习得的知识应用到实际项目中，编程实践是培养 学生解决实际问题能力的有效途径。“蓝桥杯”全国软件专业人才设计与创业大赛是提升学生编程能力 的有效平台，但在具体实践中却未能进行充分总结并形成一套可推广的做法。究其原因，与竞赛的机制 保障不健全、校内学科竞赛平台建设滞后、综合能力培养欠缺等有关。“蓝桥杯”试题具有实际意义和 应用背景，对教学内容和课程体系改革有一定的引导作用，参与“蓝桥杯”恰好能弥补上述不足。文章 以温州理工学院参赛学生为研究对象，从赛事组织、人员选拔、规则理解、硬件建设、培养机制和实践 基地建设等方面探究提升学生编程能力的实践途径，力争为工业和信息化领域建设培养中坚力量。 【关键词】“蓝桥杯”；程序设计；教学；人才培养；经验总结
毕业设计论文
深度估计_基于激光雷达+单目相机的自监督深度估计算法实现_优质项目实战