2 zzzcsd zzzcsd 于 2016.03.06 18:44 提问

为什么使用DocumentFragment就不会重新布局?

文档说DocumentFragment很好,效率高,append的时候不会重新布局,理由是,他不是document tree的一部分
我的疑惑是,document.cteate("DIV")这样出来的东西,append之前也不是document tree的一部分啊,为什么这种方式就比DocumentFragment效率低呢?

3个回答

caozhy
caozhy   Ds   Rxr 2016.03.06 22:52

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

rui888
rui888   Ds   Rxr 2016.03.07 08:59

DocumentFragment 好比一个临时的,并没有重新绘制界面。

zzzcsd
zzzcsd   2016.03.07 09:09

你们说的这些,用document.cteate("DIV")做不到吗

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
有关文档碎片(document fragment)的用法
通常情况下修改、删除或者增加DOM元素。更新DOM会导致浏览器重新绘制屏幕,也会导致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量减少更新DOM,这也就意味着将DOM的改变分批处理,并在“活动”文档树之外执行这些更新。当需要创建一个相对比较大的子树,应该在子树完全创建之后再将子树添加到DOM树中,这时采用文档碎片技术来容纳所有的节点。//反例子 //在创建时立即添加节点var p,t
DocumentFragment 对象在性能优化中的应用
DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。也就是说,这个对象相当于一个挂载点,里面包含了真实的节点。 DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。使用 Document.createDocumentFragment() 方法创建新的空 D
DocumentFragment使用
DocumentFragment相当于一份脱离document的文档,所以往其中添加元素,对其中元素做各种操作都不会影响到document文档,不会触发回流、重绘和重组等。使用它的好处在于,你可以合并多个dom操作,减少操作dom的次数。
DOM插入操作优化:DocumentFragment
使用DocumentFragment优化DOM插入操作。
js中迭代元素特性与DOM中的DocumentFragment类型
JS中迭代元素特性   在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场。   以下代码展示了如何迭代元素的每一个特性,然后将他们构造成 name = "value"  name = "value" 这样的字符串格式。 function outputAttributes(eleme
简单了解文档碎片DocumentFragment的使用
上一篇文章介绍<template>元素的时候提到了文档碎片DocumentFragment,这篇文章我们学习下什么是文档碎片,以及文档碎片的使用方式。碎片的创建很简单,使用document.createDocumentFragment()即可。当请求把一个 DocumentFragment 节点插入文档树时,插入的不是DocumentFragment 自身,而是它的所有子孙节点。
Vue双向绑定原理(一)文档片段DocumentFragment
DocumentFragment介绍JavaScript有以下几种创建节点的方式: createAttribute(name): 用指定名称name创建特性节点 createComment(text):        创建带文本text的注释节点 createElement(tagname):      创建标签名为tagname的节点 creat
js创建dom节点之最容易被忽略的createDocumentFragment()方法
js常见的创建dom节点的方法有 createElement() 创建一个元素节点 => 接收参数为string类型的nodename createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容 createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称 createComment() 创建一个注释节
用DocumentFragments或innerHTML取代复杂的元素注入
我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码。 使用DocumentFragments或者innerHTML代替复杂的元素注入 DOM操作在浏览
全栈JavaScript之路(十)学习 DocumentFragment 类型 节点
学习 DocumentFragment 类型 节点