您的位置：首页 > Web前端 > HTML

简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)

2013-03-31 23:06 696 查看
在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗...

废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！

<html>
<head>
<title></title>
</head>
<body>
<div id="div1"></div>
<script>
/*--------------------------------  第一大类  ------------------------------------*/
//方法一、innerHTML循环操作：取值赋值    (6200ms)
function comparePerformance1(){
var startDate = new Date(),
doc = window.document;
for(var i=0; i < 500; ++i){
var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>";
doc.body.innerHTML += str;
}
alert("Run times: " + (new Date() - startDate) + "ms");
}

//方法二、改良方法一，将字符串赋值给变量，避免innerHTML循环操作：取值赋值        (18ms)
function comparePerformance2(){
var startDate = new Date(),
doc = window.document,
temp;
for(var i=0; i < 500; ++i){
var str = "<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>";
temp += str;
}
doc.body.innerHTML = temp;
alert("Run times: " + (new Date() - startDate) + "ms");
}

//方法三、改良方法一，将字符串循环放入数组，然后将数组的所有字符串Join()拼接，同样避免DOM（innerHTML）循环操作：取值赋值   (20s)
function comparePerformance3(){
var startDate = new Date(),
doc = window.document,
array = [];
for(var i=0; i < 500; ++i){
//push()和赋值性能相当
array.push("<div id='div'" + i + " style='width:100px;height:30px;background-color:#eee;'>test" + i + "</div>");
}
doc.body.innerHTML = array.join('');
alert();
}

/*---------------------------------------  第二大类 -------------------------------------*/
//多次DOM操作创建节点，然后指定它们之间关系             （122ms)
function comparePerformance4(){
var startDate = new Date(),
doc = window.document;
for(var i=0; i < 500; ++i){
var div = doc.createElement("div");
var text = doc.createTextNode("text" + 1);
div.appendChild(text);
doc.body.appendChild(div);
div.style.id = "div" + i;
div.style.width = "100px";
div.style.height = "30px";
div.style.backgroundColor = "#eee";
}
alert("Run times: " + (new Date() - startDate) + "ms");
}

//createDocumentFragment             (31ms)
function comparePerformance5(){
var startDate = new Date(),
doc = window.document,
fragment = document.createDocumentFragment();
for(var i=0; i < 500; ++i){
var div = doc.createElement("div");
var text = doc.createTextNode("text" + i);
div.appendChild(text);
fragment.appendChild(div);
div.style.id = "div" + i;
div.style.width = "100px";
div.style.height = "30px";
div.style.backgroundColor = "#eee";
}
doc.body.appendChild(fragment);
alert("Run times: " + (new Date() - startDate) + "ms");
}

//使用模板元素clone         (28ms)
function comparePerformance(){
var startDate = new Date(),
doc = window.document,
fragment = document.createDocumentFragment(),
copyDiv = document.getElementById("div1");
for(var i=0; i < 500; ++i){
var div = copyDiv.cloneNode(false);
var text = doc.createTextNode("text" + i);
div.appendChild(text);
div.style.id = "div" + i;
div.style.width = "100px";
div.style.height = "30px";
div.style.backgroundColor = "#eee";
fragment.appendChild(div);
}
doc.body.appendChild(fragment);
alert("Run times: " + (new Date() - startDate) + "ms");
}

//usage test
comparePerformance();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航