您的位置：首页 > 其它

document.createDocumentFragment(文档碎片)

2013-10-18 15:31 591 查看

document.createDocumentFragment实际上是为了减少Dom次数，提高页面效率和性能；因为每当javascript对Dom操作一次，页面将刷新一次并更新内容；而利用document.createDocumentFragment创建一个文档碎片，将所有Dom操作追加到该文档碎片，最后一次性将该文档碎片添加到document中。相比前者，后者只需要对Dom操作一次，页面也就只被刷新一次，由于页面刷新次数大大减少，从而提高页面显示的效率。

<html>

<head>

<title>document.createDocumentFragment()测试页面</title>

</head>

<body>

<script type="text/javascript">

var d1 = new Date();

for (var i = 0; i < 1000; i++) {

var op = document.createElement("P");

var oText = document.createTextNode("test1");

op.appendChild(oText);

document.body.appendChild(op);

}

var d2 = new Date();

document.write("方法一用时：" + (d2.getTime() - d1.getTime()) + "<br/>");
alert(d2.getTime() - d1.getTime());

//---+-----

var d3 = new Date();

var oFrag = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {

var op = document.createElement("P");

var oText = document.createTextNode("test2");

op.appendChild(oText);

oFrag.appendChild(op);

}

document.body.appendChild(oFrag);

//这段代码中

var d4 = new Date();

document.write("方法二用时：" + (d4.getTime() - d3.getTime()) + "<br/>");
alert(d4.getTime() - d3.getTime());

</script>

</body>

</html>
PS. 比较方法一和方法二程序执行所需要的时间，应该是方法一大于方法二。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航