javascript - js优化中，离线操作dom中的“离线”怎么理解？

问题描述

问 题

经常看到js优化中提到离线操作dom以减少dom的操作
什么叫做离线操作dom呢？
reactjs与此有关吗？

解决方案

离线操作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);

这篇关于javascript - js优化中，离线操作dom中的“离线”怎么理解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！