有关文档碎片（document fragment）的用法

通常情况下修改、删除或者增加DOM元素。更新DOM会导致浏览器重新绘制屏幕，也会导

致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量减少更新DOM，这也就意

味着将DOM的改变分批处理，并在“活动”文档树之外执行这些更新。

当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中，

这时采用文档碎片技术来容纳所有的节点。

//反例子
//在创建时立即添加节点

var p,t;p = document.createElement('p');
t = document.createTextNode('first p');
p.appendChild(t);
document.body.appendChild(p);p = document.createElement('p');
t = document.createTextNode('second p');
p.appendChild(t);
document.body.appendChild(p);

创建文档碎片来离线升级节点信息是更好的做法。当将文档碎片添加到DOM树时，并不是

将碎片添加到DOM树中，而是将文档碎片的内容添加进DOM树中。文档碎片是一种很好的

方法，可以用来封装许多节点信息，甚至这些节点并没有合适的父节点。

如下示例：

var p,t,frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first p');
p.appendChild(t);
frag.appendChild(p);p = document.createElement('p');
t = document.createTextNode('second p');
p.appendChild(t);
frag.appendChild(p);document.body.appendChild(frag);

在上面例子中，活动的文档仅仅更新了一次并触发一次屏幕重绘。而第一个例子中，每

执行一个段落都会重绘一次。

在为DOM树添加新节点时文档碎片是非常有用的。但在更新DOM现有部分时，仍然可以批处理提交修改。具体的方法是为需要修改的子树的根节点建立一个克隆镜像，然后对克隆镜像做所有的修改操作，在完成操作后用克隆镜像替换原来的子树。

var old = document.getElementById('result'),clone = old.cloneNode(true);
old.parentNode.replaceChild(clone,old);

有关文档碎片（document fragment）的用法相关推荐

JS性能优化之文档碎片-document.createDocumentFragment
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新 ...
web前端分享：性能优化之文档碎片处理
有不少同学在前端开发面试的时候会被问到性能优化的相关问题,做好优化是一件非常重要的事情,今天小千就来给大家介绍一下文档碎片的处理方式. 性能优化之文档碎片一般情况下,在操作DOM结构的时候,经常会说 ...
JQuery创建文档碎片
(1)文档碎片可以提高DOM的操作性能.比如要插入一万个li标签,如果没有文档碎片,就必须插入一个然后页面渲染一次,插入完全部就要渲染一万次,太损耗性能.利用文档碎片,可以先把需要修改的全部放入文档碎 ...
linux如何右键新建文件夹,在Ubuntu 18.04右键菜单中增加新文档(New Document)及其他类型选项...
本文教你在Ubuntu 18.04操作系统下使用命令操作在右键菜单中增加"新文档(New Document)"选项,包括为不同文件类型增加右键菜单选项的方法.起因是当我尝试创建一个 ...
Sharepoint学习笔记—ECM系列--文档集(Document Set)的实现
文档集是 SharePoint Server 2010 中的一项新功能,它使组织能够管理单个可交付文档或工作产品(可包含多个文档或文件).文档集是特殊类型的文件夹,它合并了唯一的文档集属性以及文件夹和 ...
docx_demos（创建文档类Document及属性方法, 创建段落文本类Paragraph及段落格式设置, 创建字体设置类Run及属性等）
""" docx_demos.py(创建文档类Document及属性方法, 创建段落文本类Paragraph及段落格式设置, 创建字体设置类Run及属性等)使用:一.创建 ...
DOM4J解析XML文档、Document对象、节点对象节点对象属性、将文档写入XML文件（详细）...
Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM开发的.与JDOM不同的是,dom4j使用接口和抽象的人分离出来而后独立基类,虽然Dom4j的API相对要复杂一些,但它提供了 ...
360 自动打开word_Word文档高手的组合键用法，你知道几个？
软件说明:Word2016版本相信大家都知道在Excel工作表中有很多组合键.快捷键的用法,可以帮助我们节省很多的时间.其实,Word文档中也是同样有很多组合键的用法非常棒! 创建书签:Ctrl+S ...
复合二进制文档(Compound Document File)解析
复合文档(Compound Document)是一种不仅包含文本而且包括图形.电子表格数据.声音.视频图象以及其它信息的文档.可以把复合文档想象成一个所有者,它装着文本.图形以及多媒体信息如声音和图象 ...

有关文档碎片（document fragment）的用法

有关文档碎片（document fragment）的用法相关推荐

最新文章

热门文章