js优化中,离线操作dom中的"离线"怎么理解

发布网友发布时间：2024-06-23 18:27

共1个回答

热心网友时间：2024-06-23 20:35

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

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

var ul = document.getElementById('list');
ul.style.display = 'none';
// 对 ul 进行操作
ul.style.display = 'block'

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

var fragment = document.createDocumentFragment()
// 在 fragment 上进行一系列操作
document.getElementById('list').appendChild(fragment)

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

var ul = document.getElementById('list');
var clone = ul.cloneNode(true);
// 对 clone 节点进行操作
ul.parentNode.replaceChild(clone, ul);