首页 > 代码库 > 使用createDocumentFragment的渲染数据(节省性能)
使用createDocumentFragment的渲染数据(节省性能)
调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了，
而使用document.createDocumentFragment()创建一个文档碎片，
把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，
这也就只需要一次页面刷新就可。
下面是我做的2个实例，一个使用了createDocumentFragment，一个没有使用createDocumentFragment的
demo,以及渲染时间截图：
感兴趣的朋友可以自己手动加点数据试试createDocumentFragment有多节省性能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用createDocumentFragment</title></head><style type="text/css"> *{margin:0px;padding: 0px;} li{list-style:none;} .box{width:600px;margin:10px auto;} .box ul li{width:578px;padding:10px;margin-bottom:10px;border:1px solid #000; overflow:hidden;} .box ul li a{color:#999;width:100%;height:30px;line-height: 30px;border-bottom: 1px dashed #ccc;color:#000; text-decoration: none;} .box ul li p{color:#ccc;line-height:1.6em;} #time{width:100%;color:#f00;text-align:center;font-size:18px;margin-bottom: 20px;}</style><body> <div id="box" class="box"> <ul id="target"> </ul> </div> <div id="time"></div></body><script type="text/javascript" src="http://static.qiyi.com/js/common/jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript"> var target=$(‘#target‘); var oLi=$(‘.box>ul>li‘); var time=$(‘#time‘); var oHtml=‘‘; var data={ pageInfor:[ { "title":"html5", "desp":"万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准[1] 、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。" }, //想象这个后边还有N条数据 ] } function render(){ var beginTime=new Date().getTime(); var oFragment = document.createDocumentFragment(); for(var i=0;i<data.pageInfor.length;i++){ var oTitle=data.pageInfor[i].title; var oDesp=data.pageInfor[i].desp; var tmpl=[ ‘<a href="http://www.mamicode.com/#">‘+oTitle+‘</a>‘, ‘<p>‘+oDesp+‘</p>‘, ]; var str=tmpl.join(‘‘); var oLi=$(‘<li></li>‘); oLi.html(str); oFragment.appendChild(oLi[0]); } target[0].appendChild(oFragment); var endTime=new Date().getTime(); var differenceTime=‘使用createDocumentFragment的渲染数据总时长‘+(endTime-beginTime)+‘毫秒‘; time.html(differenceTime) } render();</script></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有使用createDocumentFragment</title></head><style type="text/css"> *{margin:0px;padding: 0px;} li{list-style:none;} .box{width:600px;margin:10px auto;} .box ul li{width:578px;padding:10px;margin-bottom:10px;border:1px solid #000; overflow:hidden;} .box ul li a{color:#999;width:100%;height:30px;line-height: 30px;border-bottom: 1px dashed #ccc;color:#000; text-decoration: none;} .box ul li p{color:#ccc;line-height:1.6em;} #time{width:100%;color:#f00;text-align:center;font-size:18px;margin-bottom: 20px;}</style><body> <div id="box" class="box"> <ul id="target"> </ul> </div> <div id="time"></div></body><script type="text/javascript" src="http://static.qiyi.com/js/common/jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript"> var target=$(‘#target‘); var oLi=$(‘.box>ul>li‘); var time=$(‘#time‘); var oHtml=‘‘; var data={ pageInfor:[ { "title":"html5", "desp":"万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准[1] 、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。" }, //想象这个后边还有N条数据 ] } function render(){ var beginTime=new Date().getTime(); for(var i=0;i<data.pageInfor.length;i++){ var oTitle=data.pageInfor[i].title; var oDesp=data.pageInfor[i].desp; var tmpl=[ ‘<li>‘, ‘<a href="http://www.mamicode.com/#">‘+oTitle+‘</a>‘, ‘<p>‘+oDesp+‘</p>‘, ‘</li>‘ ]; var str=tmpl.join(‘‘); oHtml+=str; target.html(oHtml) } var endTime=new Date().getTime(); var differenceTime=‘没使用createDocumentFragment的渲染数据总时长：‘+(endTime-beginTime)+‘毫秒‘; time.html(differenceTime) } render();</script></html>
使用createDocumentFragment的渲染数据(节省性能)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。