解析js原生方法创建表格效率测试


Posted in Javascript onJuly 08, 2013

我们先看一下三种算法以及在各种浏览器下的表现。
第一种: 直接操作dom。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date().getTime() / 1000;
            var s = parseInt(now, 10);
            return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var m1 = microtime(true);
var table = document.createElement("table");
table.border = 1;
var tbody = document.createElement("tbody");
for(var i = 0; i < 1000; i++ ) {
    var tr = document.createElement("tr");
    for(var j = 0; j < 5; j++ ) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("cell "+i+","+j));
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}
table.appendChild(tbody);
//chrome 0.028
//ie6 0.65
//ie7 0.40
//ie8 0.40
//ie9 0.35
//firefox14 0.035
//opera12 0.03
//safari5.17 0.014
document.body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1);
</script>    
    </body>
</html>

第二种,借助借助createDocumentFragment。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date().getTime() / 1000;
            var s = parseInt(now, 10);
            return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var m1 = microtime(true);
var table = document.createElement("table");
table.border = 1;
var tbody = document.createElement("tbody");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++ ) {
    var tr = document.createElement("tr");
    for(var j = 0; j < 5; j++ ) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("cell "+i+","+j));
        tr.appendChild(td);
    }
    fragment.appendChild(tr);
}
tbody.appendChild(fragment);
table.appendChild(tbody);
//chrome 0.03
//ie6 0.68
//ie7 0.43
//ie8 0.43
//ie9 0.37
//firefox14 0.03
//opera12 0.04
//safari5.17 0.023
document.body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1);
</script>    
    </body>
</html>

第三种:借助js的原生表格操作方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<body>
<script>
microtime = function(get_as_float) {
var now = new Date().getTime() / 1000;
var s = parseInt(now, 10);
return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var m1 = microtime(true);
var table = document.createElement("table");
table.border = 1;
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i = 0; i < 1000; i++ ) {
tbody.insertRow(i);
for(var j = 0; j < 5; j++ ) {
tbody.rows[i].insertCell(j);
tbody.rows[i].cells[j].appendChild(document.createTextNode("cell "+i+","+j));
}
var tr = document.createElement("tr");
tbody.appendChild(tr);
}
//chrome 0.19
//ie9 0.18
//ie8 0.25
//ie7 8.50
//ie6 20.45
//firefox14 0.065
//opera12 0.25
//safari5.17 0.18
document.body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1);
</script>    
</body>
</html>

以上可以看出用原生的js创建表格效率最好,借助createDocumentFragment优势不是很大(并不像网上说的那么明显),借助insertRow和insertCell等在ie6、7下效率太低,不建议使用。

对第一种算法简单的优化了一下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date().getTime() / 1000;
            var s = parseInt(now, 10);
            return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var m1 = microtime(true);
var table = document.createElement("table");
table.border = 1;
var tbody = document.createElement("tbody");
var i = 1000;
while(i--){
    var tr = document.createElement("tr"), j = 5;
    while(j--){
        var td = document.createElement("td");
        td.appendChild(document.createTextNode("cell "+i+","+j));
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}
table.appendChild(tbody);
//chrome 0.03
//ie6 0.66
//ie7 0.41
//ie8 0.41
//ie9 0.35
//firefox14 0.03
//opera12 0.03
//safari5.17 0.013
document.body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1);
</script>    
    </body>
</html>

总结:对dom操作尽量使用createElement和appendChild,对于js内核提供的一些特殊方法慎用。
Javascript 相关文章推荐
html下载本地
Jun 19 Javascript
javascript 动态添加表格行
Jun 22 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
再谈JavaScript线程
Jul 10 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 #Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 #Javascript
解析使用JS 清空File控件的路径值
Jul 08 #Javascript
使用JS 清空File控件的路径值
Jul 08 #Javascript
JS 修改URL参数(实现代码)
Jul 08 #Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 #Javascript
浅谈JavaScript之事件绑定
Jul 08 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
载入进度条 效果
2006/07/08 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python 标准差计算的实现(std)
2019/07/29 Python
python日志模块logbook使用方法
2019/09/19 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python join()函数原理及使用方法
2020/11/14 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
教师个人年度总结
2015/02/11 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript