解析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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
javascript 简练的几个函数
Aug 29 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
详解React的回调渲染模式
Sep 10 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
js面向对象的写法
2016/02/19 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
express 项目分层实践详解
2018/12/10 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python多继承原理与用法示例
2018/08/23 Python
python3调用windows dos命令的例子
2019/08/14 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Django model class Meta原理解析
2020/11/14 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
项目专员岗位职责
2013/12/04 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
物资采购方案
2014/06/12 职场文书
应聘教师自荐书
2014/06/16 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
技能培训通讯稿
2015/07/18 职场文书