软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > JavaScript:使用document.createDocumentFragment优化性能

JavaScript:使用document.createDocumentFragment优化性能

  如果对客户端动态交互要求比较高,在DOM里需要频繁动态增加元素,那么可能会遇到性能问题,那么就有可能用到DocumentFragment了,具体看看下面的例子,性能差别还是挺大的。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.veryhuo.com</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="button" onclick = "slowAdd()"/></p>
<p>
<input id="Button2" type="button" value="button" onclick = "fastAdd()"/></p>

</body>
</html>

出处:http://justinw.cnblogs.com/

    相关阅读
    栏目导航
    推荐软件