documentFragment 是一個無父對象的document對象
他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2屬性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以將documentFragment 作為一個參數,(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。
Example:
复制代码 代码如下:
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag);

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
复制代码 代码如下:
var oui=document.getElementById("oItem");
for(var i=0;i<10;i++)
{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item"+i));
}

上面的代码在循环中调用了oui.appendChild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:
复制代码 代码如下:
var oui=document.getElementById("oItem");
var oFragment=document.createDocumentFragment();
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item"+i));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment);

W3C参考:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-B63ED1A3

详细出处参考:http://www.jb51.net/article/17647.htm

关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃的更多相关文章

  1. Javascript -- document的createDocumentFragment()方法

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  2. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

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

    对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...

  4. 关于document.createDocumentFragment()(转)

    documentFragment 是一个无父对象的document对象. 他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNod ...

  5. document.createDocumentFragment()的用法

    createDocumentFragment有什么作用呢? 调用多次document.body.append(),每次都要刷新页面一次.效率也就大打折扣了,而使用document_createDocu ...

  6. JavaScript document

    window -- document用于表现HTML页面当前窗体的内容 document,中文"文档" document是BOM中最重要对象之一 document对象是window ...

  7. javascript document对象 第21节

    <html> <head> <title>DOM对象</title> <style type="text/css"> t ...

  8. document.createDocumentFragment 方法

    基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...

  9. document.createDocumentFragment()运行效率

    createDocumentFragment作用是什么? 快速响应,提高效率,提升用户体验. 调用document.body.append(),每调用一次都要刷新页面 一次.效率就低了. 用docum ...

随机推荐

  1. JSON 入门

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  2. iOS-设置状态栏白色以及覆盖状态栏

    iOS-设置状态栏白色以及覆盖状态栏 将状态栏设置为白色 首先, 在info.plist中添加一个标记. View controller–based status bar appearance键值设置 ...

  3. 《ICSharpCode快速解压缩帮助类》——即粘即用

    在项目中往往使用解压缩公共类,解压缩之后的文件占用空间小,也可进行加密,往往可以用于客户端上传附件,打包输出主程序等,其中的好处就不多说了,最近着手的项目中多次使用到了解压缩方法,现较流行的就是ICS ...

  4. MySQL日志概述

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3859866.html ...

  5. $(this).next()与$(this).children()

    $(this).next() 当前元素同级的下个元素,而非子元素 $(this).children() 是当前元素的下一级元素的集合,就是子元素的集合,而不管子元素的后代元素 所以这两个没有什么可比性 ...

  6. 怎样在thinkphp里面执行原生的sql语句

    $Model = new Model(); $sql = "select * from `order`"; $voList = $Model->query($sql); 只是 ...

  7. 分享最近和同事处理的 解析XML的相关问题

    CREATE OR REPLACE PROCEDURE BATCHINSERTSK_DEVICE_RECORD1(      xmlstr  IN clob,          v_commits o ...

  8. 【原】iOS 获取当前和 前后n天的日期

    原文:http://www.cnblogs.com/A--G/p/4759810.html 一.获取当前日期需要调用一个简单的方法:[NSDate date];//获取现在的日期 -(NSString ...

  9. SSL VPN 详解

    SSL VPN是专栏VPN系列技术原理的最后一篇,SSL VPN作为远程接入型的VPN,已经具备非常广阔的前景,它的主要适应场景是取代L2TP Over IPSec,但功能要比L2TP Over IP ...

  10. SQL三大范式

    第一范式:确保每列的原子性. 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 例如:顾客表(姓名.编号.地址.……)其中"地址"列还可 ...