侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 37 个标签
  • 累计收到 351 条评论

目 录CONTENT

文章目录

详解DocumentFragment及其用途

M酷
2021-03-30 / 0 评论 / 0 点赞 / 501 阅读 / 1,169 字 / 正在检测是否收录...

简介

DocumentFragment 文档片段,一个没有父对象的最小文档对象。
它被作为一个轻量版的 Document 使用,存储由节点(nodes)组成的文档结构。与document相比,最大的区别是 DocumentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,也就不会导致性能等问题。

使用场景

当我们需要批量的向目标 DOM 中插入大量的节点或内容时,使用传统方式会多次触发回流和重绘(每次插入数据后,页面会立即反映出这个变化),影响页面性能,此时就可以考虑使用 DocumentFragment ,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到 document 中。相比传统操作,这个操作仅发生一个重渲染。

使用方法

DocumentFragment 使用方法和我们使用 createElement 是一样的。

 var frags = document.createDocumentFragment();
  • 比如我们想向如下列表中插入数据:
<ul id="list"></ul>
  • 我们就可以使用 DocumentFragment 把零散的 DOM 操作合并起来,最后批量 append 到 list 对应的真实 DOM 中
const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);

兼容性

😄 目前来说,主流浏览器都兼容该api,可以放心使用。

总结

DOM 操作是一个很费力耗时的工作,所以这样的交互越少越好。当要向目标 DOM 添加大量数据时,如果逐个添加这些节点,这个过程有可能会十分缓慢。而利用 DocumentFragement 来操作要更高效。所以,当需要进行大量 DOM 操作时,尽量使用 DocumentFragement,它会让你的应用变的更快!

0
广告 广告

评论区