JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Javascript createDocumentFragment的使用

首先,介绍了几种常见的动态创建html节点的方法,如下所示:
方法 说明
crateAttribute(name) 用指定名称name创建特性节点
createComment(text) 创建带文本text的注释节点
createDocumentFragment() 创建文档碎片节点
createElement(tagname) 创建标签名为tagname的节点
createTextNode(text) 创建包含文本text的文本节点

以上这些方法,每次JavaScript对DOM的操作都会改变当前页面的呈现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中,这个就是createDocumentFragment()的用武之处。

createDocumentFragment()说明

DocumentFragment:表示文档的一部分(或一段),更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。

不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

可以用Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。

说明:添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面。 该做法可以减少页面渲染dom元素的次数。经IE和FireFox下测试,在append1000个元素时,效率能提高10%-30%,FireFox下提升较为明显。

createDocumentFragment()用法示例

使用appendChild逐个向DOM文档中添加1000个新节点:
for (var i = 0; i < 1000; i++)
{
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el);
}

使用createDocumentFragment()一次性向DOM文档中添加1000个新节点:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++)
{
    var el = document.createElement('p');
    el.innerHTML = i; frag.appendChild(el);
}
document.body.appendChild(frag);

不要小瞧这10%-30%,效率的提高是着眼于多个细节的,如果我们能在很多地方都能让程序运行速度提高10%-30%,那将是一个质的飞跃,您也将步入骨灰级玩家的行列。