关于一个常被大家遗忘的方法解决频繁操作 dom节点引起页面回流

用document.createDocumentFragment()来新建一个代码片段

如下代码：

代码 var _tn;
var _d=document;
for(var i=0;i<100;i++){
_tn=_d.createTextNode(i);
document.body.appendChild(_tn);
}

上面写法会引起100次的页面回流（也就是dom树的100次刷新）

而下面的写法只刷新一次

代码

var _tn;
var _d=document;
var _dFragment=_d.createDocumentFragment();
for(var i=0;i<100;i++){
_tn=_d.createTextNode(i);
_dFragment.appendChild(_tn);
}
document.body.appendChild(_dFragment);

其实这就像我们常常采用并字符串的形式

var con='';

for(var i=0;i<10;i++){

con+='<li>123<li>';

}

obj.innerHTML=con;有时这种方法效率会更高