解析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 相关文章推荐
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
微信小程序自动客服功能
Nov 02 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
Vue computed 计算属性代码实例
Apr 22 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的一些小问题
2010/07/03 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
解读ES6中class关键字
2017/11/20 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
React优化子组件render的使用
2019/05/12 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
初中三年毕业生的自我评价分享
2014/02/14 职场文书
上海世博会口号
2014/06/19 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
装配出错检讨书
2014/09/23 职场文书
植树节新闻稿
2015/07/17 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫