inexplicably inextricable » 日志 » DOM 操作 VS. innerHTML 拿来主义 quirksmode
DOM 操作 VS. innerHTML 拿来主义 quirksmode
inexplicable 发表于 2008-04-14 23:11:52
之前在web 上阅读过一些关于innerHTML 操作的文章，基本上就是说innerHTML 比dom 的标准操作，appendChild, removeChild 要快。近日正好focus 在js 的tuning 时就顺便试了一下，发现也不尽然。
在FF2, Safari3, Opera, IE8 等我机器上有的Browsers 运行一下一段测试的时候，发现DOM 的标准操作反而要快很多。
<html>
<head>
<title>javascript profiler testing level 0
</title>
</head>
<body>
<div id="container">
</div>
<div id="holder">
<span>hello world</span>
</div>
<script>
<!--
function ieOpt(con){
var i = 1000, holderDiv = document.getElementById('holder');
do{
con.innerHTML = holderDiv.innerHTML;
con.innerHTML = '';
}
while(i--);
}
function dom3Opt(con){
var i = 1000, spanChild = document.createElement('span');
spanChild.innerHTML = 'hello world';
do{
con.appendChild(spanChild);
con.removeChild(spanChild);
}
while(i--);
}
function perf(){
var con = document.getElementById('container'), start = new Date().getTime();
dom3Opt(con);
var end = new Date().getTime();
alert('[dom3] --- ' + (end - start));
start = new Date().getTime();
ieOpt(con);
end = new Date().getTime();
alert('[innerHTML] --- ' + (end - start));
}
document.body.onload = perf;
window.onload = perf;
//-->
</script>
</body>
</html>
看来在操作对象的size 对测试结果还是有明显影响的，所以，还是拿来主义，取其精粹，去其糟粕。恩
在FF2, Safari3, Opera, IE8 等我机器上有的Browsers 运行一下一段测试的时候，发现DOM 的标准操作反而要快很多。
<html>
<head>
<title>javascript profiler testing level 0
</title>
</head>
<body>
<div id="container">
</div>
<div id="holder">
<span>hello world</span>
</div>
<script>
<!--
function ieOpt(con){
var i = 1000, holderDiv = document.getElementById('holder');
do{
con.innerHTML = holderDiv.innerHTML;
con.innerHTML = '';
}
while(i--);
}
function dom3Opt(con){
var i = 1000, spanChild = document.createElement('span');
spanChild.innerHTML = 'hello world';
do{
con.appendChild(spanChild);
con.removeChild(spanChild);
}
while(i--);
}
function perf(){
var con = document.getElementById('container'), start = new Date().getTime();
dom3Opt(con);
var end = new Date().getTime();
alert('[dom3] --- ' + (end - start));
start = new Date().getTime();
ieOpt(con);
end = new Date().getTime();
alert('[innerHTML] --- ' + (end - start));
}
document.body.onload = perf;
window.onload = perf;
//-->
</script>
</body>
</html>
看来在操作对象的size 对测试结果还是有明显影响的，所以，还是拿来主义，取其精粹，去其糟粕。恩
相关日志:
收藏:
QQ书签
del.icio.us
订阅:
Google
抓虾
