浏览 2070 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-04-16
前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！
<html>
<head>
<title>createDocumentFragment的使用</title>
<script type="text/javascript">
function slowAdd() {
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
}
function fastAdd(){
var oFragmeng = document.createDocumentFragment(); //创建文档碎片
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);
}
document.body.appendChild(oFragmeng); //最后一次性添加到document中
}
</script>
</head>
<body >
<p>
<input id="Button1" type="button" value="普通方法" onclick = "slowAdd()"/></p>
<p>
<input id="Button2" type="button" value="createDocumentFragment快速操作" onclick = "fastAdd()"/></p>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-04-28
createDocumentFragment
这个东西是相当好用好用呀。 还有个方法， var cache = []; ... ceche.push(...) ... cache.join(); 或者 node.style.display='none'; ... node.appendChild(...); ... node.style.display='block'; 可惜的是，第二种方法会引起页面滚动条变化。 |
| 返回顶楼 | |
|
发表时间：2010-04-29
greatghoul 写道 createDocumentFragment
这个东西是相当好用好用呀。 还有个方法， var cache = []; ... ceche.push(...) ... cache.join(); 或者 node.style.display='none'; ... node.appendChild(...); ... node.style.display='block'; 可惜的是，第二种方法会引起页面滚动条变化。 以前都没有用过这个东西，后来的时候在论坛发了一篇JS操作table的文章，大伙强烈建议使用它，在了解了它，话说它确实很好用！ |
| 返回顶楼 | |
