关于一个常被大家遗忘的方法解决频繁操作 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;有时这种方法效率会更高