方法1
<html>
<head>
<script>
function createElements()
{
var t1 = new Date();
for(var i = 0; i < 10000; i++)
{
var oP = document.createElement("p");
oP.innerText = "hello world";
document.all("div1").appendChild(oP);
}
var t2 = new Date();
document.all("div2").innerText = "time span is:" + (t2 - t1) + "ms";
}
</script>
</head>
<body onload="createElements()">
<div id="div1" />
<div id="div2" />
</body>
</html>
<head>
<script>
function createElements()
{
var t1 = new Date();
for(var i = 0; i < 10000; i++)
{
var oP = document.createElement("p");
oP.innerText = "hello world";
document.all("div1").appendChild(oP);
}
var t2 = new Date();
document.all("div2").innerText = "time span is:" + (t2 - t1) + "ms";
}
</script>
</head>
<body onload="createElements()">
<div id="div1" />
<div id="div2" />
</body>
</html>
输出结果：
time span is:6718ms
方法2
输出结果：
方法2
<html>
<head>
<script>
function createElements()
{
var t1 = new Date();
var oFragment = document.createDocumentFragment();
for(var i = 0; i < 10000; i++)
{
var oP = document.createElement("p");
oP.innerText = "hello world";
oFragment.appendChild(oP);
}
document.all("div1").appendChild(oFragment);
var t2 = new Date();
document.all("div2").innerText = "time span is:" + (t2 - t1) + "ms";
}
</script>
</head>
<body onload="createElements()">
<div id="div1" />
<div id="div2" />
</body>
</html>
<head>
<script>
function createElements()
{
var t1 = new Date();
var oFragment = document.createDocumentFragment();
for(var i = 0; i < 10000; i++)
{
var oP = document.createElement("p");
oP.innerText = "hello world";
oFragment.appendChild(oP);
}
document.all("div1").appendChild(oFragment);
var t2 = new Date();
document.all("div2").innerText = "time span is:" + (t2 - t1) + "ms";
}
</script>
</head>
<body onload="createElements()">
<div id="div1" />
<div id="div2" />
</body>
</html>
输出结果：
time span is:1344ms
将新创建的元素临时 append 到一个 document fragment 对象上，全部创建完成之后再将此 document fragment 对象 apped 到 document 上，这样的话只是在 append document fragment 的时候刷新一次 dom，而不使用 document fragment 对象在每次 append 的时候都会刷新 dom。因此方法二比方法一的性能得到了显著的提升！
将新创建的元素临时 append 到一个 document fragment 对象上，全部创建完成之后再将此 document fragment 对象 apped 到 document 上，这样的话只是在 append document fragment 的时候刷新一次 dom，而不使用 document fragment 对象在每次 append 的时候都会刷新 dom。因此方法二比方法一的性能得到了显著的提升！