利用DocumentFragment加快DOM渲染速度

DocumentFragment 对象

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

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

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

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

也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。

利用DocumentFragment加快DOM渲染速度

function CreateNodes(){
    for(var i = 0;i < 10000;i++){
        var tmpNode = document.createElement("div");
        tmpNode.innerHTML = "test" + i + "
"; document.body.appendChild(tmpNode); } } function CreateFragments(){ var fragment = document.createDocumentFragment(); for(var i = 0;i < 10000;i++){ var tmpNode = document.createElement("div"); tmpNode.innerHTML = "test" + i + "
"; fragment.appendChild(tmpNode); } document.body.appendChild(fragment); }

上面的代码给出了两个函数,分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点。测试结果:

大量的操作DOM节点的时候推荐DocumentFragement方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注