DocumentFragment 是什么 ? DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。...与 document 相比,最大的区别是 DocumentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。...#方法三 这个时候,就到了 DocumentFragment 上场了,翻译过来就是文档片段的意思。...简单来说就是在内存中提供了一个 DOM 对象,当我们需要频繁操作 DOM 的时候,可以在内存先中创建一个 DocumentFragment 文档片段,然后对这个文档片段中进行一系列频繁的 DOM 操作,...child.appendChild(text); frag.appendChild(child); } parent.appendChild(frag); #总结 当应对于频繁的DOM操作的场景,可以使用DocumentFragment
+= 5 top += 5 } el.style.left = left + 'px' el.style.top = left + 'px' 对元素进行“离线操作”,完成后再一起更新: 使用 DocumentFragment...进行缓存操作,引发一次回流和重绘 了解DocumentFragment 给我们带来的性能优化 元素操作前使用 display: none,完成后再将其显示出来,这样只会触发一次回流和重绘。...DocumentFragment 有两大特点: DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。...当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。...这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
当然~~ 使用 DocumentFragment 先解释一下什么是 DocumentFragment ,文献引用自MDN DocumentFragment,文档片段接口,表示一个没有父级文件的最小文档对象...最大的区别是因为 DocumentFragment不是真实DOM树的一部分,它的变化不会触发DOM树的(重新渲染) ,且不会导致性能等问题。...可以使用 document.createDocumentFragment方法或者构造函数来创建一个空的 DocumentFragment 从MDN的说明中,我们得知 DocumentFragments是...而 append元素到 documentFragment 中时,是不会计算元素的样式表,所以 documentFragment 性能更优。
使用DocumentFragment 上面的写法显然不够好,无法复用。我们可以使用DocumentFragment进行优化。...li') li.textContent = text fragment.appendChild(li) }) parentNode.appendChild(fragment) 复制代码 如果不使用DocumentFragment
} loop2() break; case 4: // 一下子使用DocumentFragment...加载1w条总时间:382ms const documentFrag = new DocumentFragment() for (let i...为了测试是否因为chrome做了合并处理,我在case 4中使用了DocumentFragment,结果发现和case 0 的表现一致。暂且,这样理解。
# documentFragment DocumentFragment 文档片段接口,一个没有父亲对象的最小文档对象。...与 document 相比,最大的区别是 DocumentFragment 不是真是 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能问题。...当我们把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。...在频繁的 DOM 操作时,就可以将 DOM 元素插入 DocumentFragment,之后一次性地将所有的子孙节点插入文档中。...和直接操作 DOM 相比,将 DocumentFragment 节点插入 DOM 树时,不会触发页面的重绘,大大提高了页面的性能。
React v15 CHANGELOG 11也有一个经典案例,Vue.js 的1.x 版本就是使用的 documentFragment 来做 virtualDOM。...documentFragment 支持完整的 DOM 操作,但由于本身不在文档流中,频繁操作不会导致浏览器频繁执行 parseHTML。 Element 这个没什么好说的,平常用得最多的了。
#使用DocumentFragment 将DOM多次修改,最后一次性插入到DOM中,这点在DocumentFragment中展现的淋漓尽致,关于DocumentFragment详细操作可以下一章。
documentFragment 是什么?用它跟直接操作 DOM 的区别是什么?...MDN中对documentFragment的解释:DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。...当我们把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。...在频繁的DOM操作时,我们就可以将DOM元素插入DocumentFragment,之后一次性的将所有的子孙节点插入文档中。...和直接操作DOM相比,将DocumentFragment 节点插入DOM树时,不会触发页面的重绘,这样就大大提高了页面的性能。
MDN中对documentFragment的解释:DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。...与document相比,最大的区别是DocumentFragment不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。...当我们把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。...在频繁的DOM操作时,我们就可以将DOM元素插入DocumentFragment,之后一次性的将所有的子孙节点插入文档中。...和直接操作DOM相比,将DocumentFragment 节点插入DOM树时,不会触发页面的重绘,这样就大大提高了页面的性能。
master.firstChild)){ // intentional assignment df.appendChild(fc); } return df; // DocumentFragment... 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段。...(fc = master.firstChild)){ // intentional assignment 56 df.appendChild(fc); 57 } 58 return df; // DocumentFragment
DOCTYPE html> 文档片段节点 DocumentFragment 11 Javascript obj.nodeName obj.nodeValue obj.attributes[0
ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment...nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; } 注意:DocumentFragment
// 例如要移除 div 标签 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...元素,用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点,将不是要移除的标签添加到新的 DocumentFragment...; // 例如要移除包含的样式 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...元素,用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点,将不是要移除的标签添加到新的 DocumentFragment
如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
接下来先介绍一个东西DocumentFragment DocumentFragment DocumentFragment是示一个没有父级文件的最小文档对象。...最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作,且不会导致性能等问题。...考虑这个因素,我们可以结合cloneNode和DocumentFragment在去创建DOM元素并插入到文档: var fragment = document.createDocumentFragment
DocumentFragment类型 DocumentFragment类型是文档片段接口,一个没有父对象的最小文档对象。
Range.createContextualFragment(html)方法,MDN对该方法叙述:The Range.createContextualFragment() method returns a DocumentFragment...当然也可使用兼容性没有问题的DocumentFragment对象。
如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。...DocumentFragment 节点代表一个文档的片段,本身就是一个完整的 DOM 树形结构。 它没有父节点,parentNode 返回 null ,但是可以插入任意数量的子节点。...它不属于当前文档,操作 DocumentFragment 节点,要比直接操作 DOM 树快得多。 它一般用于构建一个 DOM 结构,然后再插入当前文档。
DocumentFragment 对象表示一个没有父级文件的最小文档对象。...最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题。...1.2.2 DocumentFragment 上面我们已经介绍过DocumentFragment了,利用它转换字符串。下面我们利用该对象来作为临时容器,一次性添加多个节点。...利用document.createDocumentFragment()方法可以创建一个空的DocumentFragment对象。...但是从动态添加节点来看,网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。