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不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。...1.2.2 DocumentFragment 上面我们已经介绍过DocumentFragment了，利用它转换字符串。下面我们利用该对象来作为临时容器，一次性添加多个节点。...利用document.createDocumentFragment()方法可以创建一个空的DocumentFragment对象。...但是从动态添加节点来看，网上说的DocumentFragment方法性能远远好于直接append的说法在我的测试场景中并不成立。
# documentFragment DocumentFragment 文档片段接口，一个没有父亲对象的最小文档对象。...与 document 相比，最大的区别是 DocumentFragment 不是真是 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能问题。...当我们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。...在频繁的 DOM 操作时，就可以将 DOM 元素插入 DocumentFragment，之后一次性地将所有的子孙节点插入文档中。...和直接操作 DOM 相比，将 DocumentFragment 节点插入 DOM 树时，不会触发页面的重绘，大大提高了页面的性能。
接下来先介绍一个东西DocumentFragment DocumentFragment DocumentFragment是示一个没有父级文件的最小文档对象。...最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作，且不会导致性能等问题。...考虑这个因素，我们可以结合cloneNode和DocumentFragment在去创建DOM元素并插入到文档: var fragment = document.createDocumentFragment
使用DocumentFragment 上面的写法显然不够好，无法复用。我们可以使用DocumentFragment进行优化。...li') li.textContent = text fragment.appendChild(li) }) parentNode.appendChild(fragment) 复制代码 如果不使用DocumentFragment
// 例如要移除 div 标签 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的 DocumentFragment...; // 例如要移除包含的样式 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的 DocumentFragment
当然~~ 使用 DocumentFragment 先解释一下什么是 DocumentFragment ，文献引用自MDN DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象...最大的区别是因为 DocumentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。...可以使用 document.createDocumentFragment方法或者构造函数来创建一个空的 DocumentFragment 从MDN的说明中，我们得知 DocumentFragments是...而 append元素到 documentFragment 中时，是不会计算元素的样式表，所以 documentFragment 性能更优。
#使用DocumentFragment 将DOM多次修改，最后一次性插入到DOM中，这点在DocumentFragment中展现的淋漓尽致，关于DocumentFragment详细操作可以下一章。
} loop2() break; case 4: // 一下子使用DocumentFragment...加载1w条总时间：382ms const documentFrag = new DocumentFragment() for (let i...为了测试是否因为chrome做了合并处理，我在case 4中使用了DocumentFragment，结果发现和case 0 的表现一致。暂且，这样理解。
React v15 CHANGELOG 11也有一个经典案例，Vue.js 的1.x 版本就是使用的 documentFragment 来做 virtualDOM。...documentFragment 支持完整的 DOM 操作，但由于本身不在文档流中，频繁操作不会导致浏览器频繁执行 parseHTML。 Element 这个没什么好说的，平常用得最多的了。
Range.createContextualFragment(html)方法，MDN对该方法叙述：The Range.createContextualFragment() method returns a DocumentFragment...当然也可使用兼容性没有问题的DocumentFragment对象。
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。...DocumentFragment 节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。 它没有父节点，parentNode 返回 null ，但是可以插入任意数量的子节点。...它不属于当前文档，操作 DocumentFragment 节点，要比直接操作 DOM 树快得多。 它一般用于构建一个 DOM 结构，然后再插入当前文档。
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
DocumentFragment类型 DocumentFragment类型是文档片段接口，一个没有父对象的最小文档对象。
documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？...MDN中对documentFragment的解释：DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。...当我们把一个 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
如果利用时间分片的概念来实现这个功能，我们可以使用requestAnimationFrame+DocumentFragment 关于这两个API，我同样不会做详细的介绍，有兴趣的可以查看MDN requestAnimationFrame...跟MDN DocumentFragment。
ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment...nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; } 注意：DocumentFragment
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
