浅析document.createDocumentFragment()与js效率

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
得出的结果还是和理论上的一致了。

赞 (0)

相关推荐

  • 关于javascript document.createDocumentFragment()

    他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ow

  • JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

  • JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body

  • Vue中fragment.js使用方法详解

    大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap:至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.js 就行了. createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点? 最简单粗暴的方式就是: var parent = document.getElementById('pa

  • 监控 url fragment变化的js代码

    当然,页面最好不要刷新,但是,拷贝一下浏览器的链接,又希望是下次能定位到你播发的那个视频.方法很简单,改变一下 url 的 fragment 就可以了. 监听fragment 的变化是这类编程的核心.在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化. 但是,他们的行为有些差异.在IE8 以前的 IE版本里面,当 window.location 对象迅速变化的情况下,onhashchange 不会触发,非常奇怪的bug. 下面我写

  • 浅析document.createDocumentFragment()与js效率

    document.createDocumentFragment()说白了就是为了节约使用DOM.每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间.为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中.这是我写的一个简单的测试页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

  • JS效率个人经验谈（8-15更新），加入range技巧

    JS效率个人经验谈（8-15更新），加入range技巧

    首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒.我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度.这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条数据,有效数据为1000-1100条,输出复杂的HTML,速度为360ms左右,方法为 正则匹配Match(有循环)希望贴出您的测试数据.行innerHT

  • 浅析document.ready和window.onload的区别讲解

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在"javascript执行顺序里"http://www.jb51.net/article/44577.htm一文里有详细介绍. jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码: 复制代码 代码如下: <!--   $(document).ready(

  • 浅析PHP的静态成员函数效率更高的原因

    很多php开发人员都知道, 使用类的静态成员函数效率比类的普通成员函数的要高,本文从应用层次分析这个问题 下面是一个范例: 复制代码 代码如下: <?php // php静态方法测试header('Content-Type: text/html; charset=utf-8');class xclass{     public static $var1 = '1111111111111111';     public $var2 = 'aaaaaaaaaaaaa';     public fun

  • 浅析jQuery Ajax通用js封装

    本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示: 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /******************

  • js 效率组装字符串 StringBuffer

    function StringBuffer() { this.array = new Array(); } StringBuffer.prototype.append = function(value) { this.array[this.array.length] = value; return this; } StringBuffer.prototype.toString = function() { var _string = this.array.join(""); retur

  • 解析js原生方法创建表格效率测试

    我们先看一下三种算法以及在各种浏览器下的表现.第一种: 直接操作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>     

  • 重写document.write实现无阻塞加载js广告(补充)

    无阻塞加载javascript,对于页面性能优化有很大的作用,这样能有效的减少js对页面加载的阻塞.特别是一些广告js文件,由于广告内容有可能是富媒体,更是很可能成为你页面加载提速的瓶颈,高性能javascript告诉我们,同学,提升你的网页速度,就无阻塞地加载JS吧. 于是便有一下代码出现. (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.

随机推荐