调用多次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="#">‘+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="#">‘+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>
时间： 2024-11-03 20:46:02