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

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

第一种，不“离线的”：

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

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

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

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

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

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

p.innerHTML = html;

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