- 综合排序
- 最热优先
- 最新优先
- 来自专栏九旬大爷
使用DocumentFragment优化DOM操作
DocumentFragment 是什么 ？ DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。 与 document 相比，最大的区别是 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。 #方法三 这个时候，就到了 DocumentFragment 上场了，翻译过来就是文档片段的意思。 简单来说就是在内存中提供了一个 DOM 对象，当我们需要频繁操作 DOM 的时候，可以在内存先中创建一个 DocumentFragment 文档片段，然后对这个文档片段中进行一系列频繁的 DOM 操作， child.appendChild(text); frag.appendChild(child); } parent.appendChild(frag); #总结 当应对于频繁的DOM操作的场景，可以使用DocumentFragment
86010发布于 2020-10-23 - 来自专栏玄魂工作室
如何将HTML字符转换为DOM节点并动态添加到文档中
DocumentFragment 对象表示一个没有父级文件的最小文档对象。 最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。 1.2.2 DocumentFragment 上面我们已经介绍过DocumentFragment了，利用它转换字符串。下面我们利用该对象来作为临时容器，一次性添加多个节点。 利用document.createDocumentFragment()方法可以创建一个空的DocumentFragment对象。 但是从动态添加节点来看，网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。
10.2K20发布于 2018-09-14 - 来自专栏乱码李
Web 性能优化-页面重绘和回流（重排）
+= 5 top += 5 } el.style.left = left + 'px' el.style.top = left + 'px' 对元素进行“离线操作”，完成后再一起更新： 使用 DocumentFragment 进行缓存操作,引发一次回流和重绘 了解DocumentFragment 给我们带来的性能优化 元素操作前使用 display: none，完成后再将其显示出来，这样只会触发一次回流和重绘。 DocumentFragment 有两大特点： DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。 当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。 这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
1.4K20发布于 2021-11-26 - 来自专栏IMWeb前端团队
如何更优地去创建DOM元素
接下来先介绍一个东西DocumentFragment DocumentFragment DocumentFragment是示一个没有父级文件的最小文档对象。 最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作，且不会导致性能等问题。 考虑这个因素，我们可以结合cloneNode和DocumentFragment在去创建DOM元素并插入到文档: var fragment = document.createDocumentFragment
2.5K10发布于 2019-12-03 - 来自专栏Cellinlab's Blog
前端性能优化 常见面试题速查
# documentFragment DocumentFragment 文档片段接口，一个没有父亲对象的最小文档对象。 与 document 相比，最大的区别是 DocumentFragment 不是真是 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能问题。 当我们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。 在频繁的 DOM 操作时，就可以将 DOM 元素插入 DocumentFragment，之后一次性地将所有的子孙节点插入文档中。 和直接操作 DOM 相比，将 DocumentFragment 节点插入 DOM 树时，不会触发页面的重绘，大大提高了页面的性能。
70320编辑于 2023-05-17 - 来自专栏极度狂热
前端页面优化，减少 reflow 的方法
使用DocumentFragment 上面的写法显然不够好，无法复用。我们可以使用DocumentFragment进行优化。 li') li.textContent = text fragment.appendChild(li) }) parentNode.appendChild(fragment) 复制代码 如果不使用DocumentFragment
40110编辑于 2022-06-08 - 来自专栏码客
JS获取富文本(HTML)的摘要
// 例如要移除 div 标签 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment 元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的 DocumentFragment ; // 例如要移除包含的样式 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment 元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的 DocumentFragment
1.9K10编辑于 2024-03-29 - 来自专栏code秘密花园
「前端进阶」高性能渲染十万条数据(时间分片)
当然~~ 使用 DocumentFragment 先解释一下什么是 DocumentFragment ，文献引用自MDN DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象 最大的区别是因为 DocumentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。 可以使用 document.createDocumentFragment方法或者构造函数来创建一个空的 DocumentFragment 从MDN的说明中，我们得知 DocumentFragments是 而 append元素到 documentFragment 中时，是不会计算元素的样式表，所以 documentFragment 性能更优。
2.8K42发布于 2019-09-19 - 来自专栏九旬大爷
DOM优化之重绘和回流
#使用DocumentFragment 将DOM多次修改，最后一次性插入到DOM中，这点在DocumentFragment中展现的淋漓尽致，关于DocumentFragment详细操作可以下一章。
1.1K10发布于 2020-10-23 - 来自专栏前端笔记薄
一次加载1w条数据的最优解是什么？
} loop2() break; case 4: // 一下子使用DocumentFragment 加载1w条总时间：382ms const documentFrag = new DocumentFragment() for (let i 为了测试是否因为chrome做了合并处理，我在case 4中使用了DocumentFragment，结果发现和case 0 的表现一致。暂且，这样理解。
61020编辑于 2022-12-27 - 来自专栏Web 开发
来聊聊 DOM 中的Node、Element、Text
React v15 CHANGELOG 11也有一个经典案例，Vue.js 的1.x 版本就是使用的 documentFragment 来做 virtualDOM。 documentFragment 支持完整的 DOM 操作，但由于本身不在文档流中，频繁操作不会导致浏览器频繁执行 parseHTML。 Element 这个没什么好说的，平常用得最多的了。
1K00发布于 2018-08-08 - 来自专栏前端杂货铺
节点插入
Range.createContextualFragment(html)方法，MDN对该方法叙述：The Range.createContextualFragment() method returns a DocumentFragment 当然也可使用兼容性没有问题的DocumentFragment对象。
1.9K80发布于 2018-03-15 - 来自专栏从零开始学自动化测试
JavaScript 学习-34.HTML DOM 创建/插入/删除/替换元素
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。 DocumentFragment 节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。 它没有父节点，parentNode 返回 null ，但是可以插入任意数量的子节点。 它不属于当前文档，操作 DocumentFragment 节点，要比直接操作 DOM 树快得多。 它一般用于构建一个 DOM 结构，然后再插入当前文档。
3.3K30编辑于 2022-05-30 - 来自专栏迈向前端工程师
JS基础测试: 下列选项中哪一个是添加DOM节点?
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
1.5K30发布于 2019-08-09 - 来自专栏大熊G的前端分享
浅谈DOM中的类型
DocumentFragment类型 DocumentFragment类型是文档片段接口，一个没有父对象的最小文档对象。
61320编辑于 2022-11-14 - 来自专栏前端面试
阿里前端高频面试题
documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？ MDN中对documentFragment的解释：DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。 当我们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。 在频繁的DOM操作时，我们就可以将DOM元素插入DocumentFragment，之后一次性的将所有的子孙节点插入文档中。 和直接操作DOM相比，将DocumentFragment 节点插入DOM树时，不会触发页面的重绘，这样就大大提高了页面的性能。
74120编辑于 2022-09-12 - 来自专栏bamboo前端学习记录
DOM操作笔记
html>） Element：网页的各种HTML元素（比如<body>） Attribute：网页元素的属性（比如class="right"） Text：标签之间或标签包含的文本 Comment：注释 DocumentFragment ("div"); var newContent = document.createTextNode("Hello"); 3、document.createDocumentFragment()创建了一个DocumentFragment 对象 var docFragment = document.createDocumentFragment(); DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的 这样做的好处：因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。 举个例子解释 ?
1.4K40发布于 2019-01-29 - 来自专栏前端干货和生活感悟
jQuery之getAll()和cleanData()
ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; } 注意：DocumentFragment
57940编辑于 2022-03-28 - 来自专栏康怀帅的专栏
HTML DOM
DOCTYPE html> 文档片段节点 DocumentFragment 11 Javascript obj.nodeName obj.nodeValue obj.attributes[0
80950发布于 2018-02-28 - 来自专栏全栈程序员必看
dojo/dom-construct.toDom方法学习笔记
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
63410编辑于 2022-10-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号