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

Question

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

Answer 1

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

Answer 2

给一个最二逼的例子，假设你有一个数组，需要生成若干个<span>你的数据</span>放到div标签里。

第一种，不“离线的”：

var arrs = ['Beijing', 'Shanghai', 'Tianjin'];
var div = document.querySelector('div');

arrs.forEach(function(cityName){
    var span = document.createElement('span');
    span.innerText = cityName;
    div.appendChild(span);
});

这个不离线是因为，她频繁的操作DOM，数组长度是3，就操作了3次

再来看，“离线”的方案：

var arrs = ['Beijing', 'Shanghai', 'Tianjin'];
var div = document.querySelector('div');

var html = arrs.reduce(function(p, cityName){
    return p + '<span>' + cityName + '</span>';
}, '');

div.innerHTML = html;

一开始是在拼字符串，最后只操作了一次DOM。减少了次数，理论上，性能消耗更小一点。不过这个东西看情况吧，数据量小时起时谈不上什么"性能"