<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>文档碎片</title>
<style></style>
<script type="text/javascript">
window.onload=function(){
// 这个例子可以看到在运行之后要等待几秒钟之后，页面才会显现出新增的li，这是因为在这一万次增加新元素中
//每增加一个都是先执行增加操作，再执行页面渲染操作，这样无疑就浪费了很多时间
// var oUl=document.getElementById('ul1');
// for(var i=0;i<10000;i++){
// var oLi=document.createElement('li');
// oUl.appendChild(oLi);
// }
/////////////////////////////////////////////////////
//使用文档碎片操作可以大大的节约时间(页面渲染完成的时间大大减少)：
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment(); //创造一个文档碎片对象
for(var i=0;i<10000;i++){
var oLi=document.createElement('li');
oFrag.appendChild(oLi); //先把创建的元素都现存放在文档碎片对象中，装完了再拿过去一次性渲染完成
}
oUl.appendChild(oFrag);
}
</script>
</head>
<body>
<ul id='ul1'></ul>
</body>
</html>
但是不得不说，文档碎片对于提高页面性能来说功能还是很鸡肋的，因为在高级浏览器比如chrome和IE9来说，文档碎片节省的时间微乎其微，在低版本的浏览器来说，节省的时间还是相当可观的