解析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不同页面传值的改进版
Sep 30 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
JS模拟自动点击的简单实例
2013/08/08 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
js实现抽奖功能
2020/11/24 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
十一酒店活动方案
2014/02/20 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
学生犯错保证书
2015/05/09 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python 中面向接口编程
2022/05/20 Python