浅析document.createDocumentFragment()与js效率


Posted in Javascript onJuly 08, 2013

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
这是我写的一个简单的测试页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document.createDocumentFragment()测试页面</title>
</head>
<body>
<script type="text/javascript">
       var d1 = new Date();
       for(var i=0;i<1000;i++)
       {
              var op=document.createElement("P");
              var oText=document.createTextNode("test1");
              op.appendChild(oText);
              document.body.appendChild(op);
       }
       var d2 = new Date();
       document.write("方法一用时:" + (d2.getTime() - d1.getTime()) + "<br/>");
       //---+-----
       var d3 = new Date();
       var oFrag=document.createDocumentFragment();
       for(var i=0;i<1000;i++)
       {
              var op=document.createElement("P");
              var oText=document.createTextNode("test2");
              op.appendChild(oText);
              oFrag.appendChild(op);
       }
       document.body.appendChild(oFrag);
       //这段代码中
       var d4 = new Date();
       document.write("方法二用时:" + (d4.getTime() - d3.getTime()) + "<br/>");
</script>
</body>
</html>

一旦把节点添加到document.body(或其后的节点)中,页面就会立即反映出这个变化。对于第一小段程序,运行是没有任何问题的,但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新,这样会产生很多页面碎片。而第二小段代码,document.body.appendChild()仅调用了一次,这意味着只需要进行一次页面的刷新,需要的时间显然会比前面的要少。
我用了三种浏览器测试上面的测试代码,大致得出的结果为:
IE7:
       方法一用时:140
       方法二用时:125
Firefox:
       方法一用时:66
       方法二用时:43
Chrome:
       方法一用时:35
       方法二用时:25
得出的结果还是和理论上的一致了。
Javascript 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
如何使用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
JS Map 和 List 的简单实现代码
Jul 08 #Javascript
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python自动连接ssh的方法
2015/03/07 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
经管应届生求职信
2013/11/17 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
《泉水》教学反思
2014/04/11 职场文书
稽核岗位职责范本
2015/04/13 职场文书
南京大屠杀观后感
2015/06/02 职场文书
物资采购管理制度
2015/08/06 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
python字典进行运算原理及实例分享
2021/08/02 Python