<!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来说,文档碎片节省的时间微乎其微,在低版本的浏览器来说,节省的时间还是相当可观的