js优化中，离线操作dom是什么

离线操作dom是什么

离线操作dom是指： 当对 dom 节点有较大改动的时候，我们先将元素脱离文档流，然后对元素进行操作，最后再把操作后的元素放回文档流。

离线操作dom的做法有哪些

1. 改变 display 属性，临时将某个元素从文档流中脱离，然后再恢复。

dom.style.display = 'none';
// 对 dom 进行操作

dom.style.display = 'block'
复制代码

2. 通过 createDocumentFragment,创建文档片段，操作后一次性把文档片段添加到文档流中。

const fragment = document.createDocumentFragment()
// 在 fragment 上进行一系列操作
document.getElementById('list').appendChild(fragment)
复制代码

3. 通过在需要操作的节点上创建副本，然后在副本上进行操作，最后进行替换

const ul = document.getElementById('list')
const clone = ul.cloneNode(true)
// 对 clone 节点进行操作
ul.parentNode.replaceChild(clone, ul)
复制代码

其他

问： 将元素脱离文档流这一步是必须的吗？如果元素脱离文档流引起页面大面积重绘和重排，那不是更麻烦吗，还是说在在布局的时候就在需要脱离文档流的元素外面使用一个固定宽高位置的div包裹，避免整页重排？

答： 如果不脱离文档流，对文档的每一步操作都有可能导致重绘或者重排，但是使用离线dom操作可以让操作完成之后只产生一次重排。