浅谈文档碎片

不管是js还是很常见的jquery，我们一般操作DOM就会引起页面数据的渲染，在比较大的项目或者说的更直接点，是面试别人问起来的时候知道。细节也很重要。

createDocumentFragment() 的作用主要是以前你用小刀一刀一刀的割，但是文档碎片使用的是长40米的大刀，一刀就解决。何乐不为呢。测试碎片在大动干戈的情况下确实稍微效率高点。

 通常操作DOM的几种情况：
1：

for(var i=0;i<5;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    document.body.appendChild(op); 
}

但是使用文档碎片以后就是这个样子：

//先创建文档碎片
var oFragmeng = document.createDocumentFragment(); 
for(var i=0;i<10000;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    //先附加在文档碎片中
    oFragmeng.appendChild(op);  
} 
//最后一次性添加到document中
document.body.appendChild(oFragmeng);

但是对于那些只会使用jquery而不知道js怎么玩的主儿，也是可以操作文档碎片的。

var arr = ["baidu","sina","telcent","ali"];
  var fragment = document.createDocumentFragment();
  $.each(arr,function(i,item){
    var newItem = $("<li>"+item+"</li>")[0];
    fragment.appendChild(newItem);
  });
  $("ul")[0].appendChild(fragment);

其实一切都是语法糖而已，只不过大家饭后的闲语而已，真正做起来，谁还管他37->21,能搞定自己的项目才是王道不是么，像上面这个案例：不使用文档碎片也是照样玩的666的，不是麽，大牛玩菜鸟，菜鸟玩jb而已。

var arr = ["baidu","sina","telcent","ali"];
  var html = "";
  $.each(arr, function(index, val) {
    html += "<li>" + val + "</li>";	
  });
  $('ul').html(html);

ps:本文代码属于网上随便拉的，装不装这个B就看你写代码的时候脑子能不能缓存到这个40米的大刀。