解析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网页侧边随页面滚动广告效果实现
Apr 14 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue中如何去掉空格的方法实现
Nov 09 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
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
JS功能代码集锦
2016/05/04 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
js判断节假日实例代码
2017/12/27 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python import自定义模块方法
2015/02/12 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python如何绘制日历图和热力图
2020/08/07 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
学校十一活动方案
2014/02/01 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
SQL基础的查询语句
2021/11/11 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python