performance of modifying elements returned from getElementsByTagName

K

Kamjah Kogumah

Out of curiosity, I tested the performance of the following two ways of
modifying elements that is returned from getElementsByTagName. Dev
Opera recommend the second way.
According to my test, (on Windows XP with online Tryit Editor)
In Firefox 2, modifyDOM1 takes about same as modifyDOM2
In IE 6 and Opera 9, modifyDOM2 is 10 times faster than modifyDOM1.


modifyDOM1 :
var allPara = document.getElementsByTagName('p');
for( var i = 0, n=allPara.length; i < n; i++ ) {
allPara.appendChild(document.createTextNode(i));

modifyDOM2 :
var allPara = document.getElementsByTagName('p');
var collectTemp = [];
for(var i = 0, n=allPara.length; i < n; i++) {
collectTemp.push(allPara);
}
for(var i = 0, n=collectTemp.length; i < n; i++ ) {
collectTemp.appendChild(document.createTextNode(i));
}
collectTemp = null; // comment this line out to test performance
impact of not deleting collectTemp.

Dev Opera : Avoid modifications while traversing the DOM :
http://dev.opera.com/articles/view/efficient-javascript/?page=3#traversemodify
(The above code is a little different from those in Dev Opera article.)


profiling source : (profiling result at the end).
<html>
<head>
<script type="text/javascript">

globalN = 500;
function modifyDOM1(){
var N = globalN;
for(var k=0; k<N; k++){
var allPara = document.getElementsByTagName('p');
for( var i = 0, n=allPara.length; i < n; i++ ) {
allPara.appendChild(document.createTextNode(i));
}
}
}


function modifyDOM2(){
var N = globalN;
for(var k=0; k<N; k++){
var allPara = document.getElementsByTagName('p');
var collectTemp = [];
for(var i = 0, n=allPara.length; i < n; i++) {
collectTemp.push(allPara);
}
for(var i = 0, n=collectTemp.length; i < n; i++ ) {
collectTemp.appendChild(document.createTextNode(i));
}
collectTemp = null;
}
}


function measure(f,message){
var t = (new Date()).getTime();
f();
t = (new Date()).getTime() - t;

document.getElementById('measure_result').appendChild(document.createTextNode(message+'
: '+t));
}

window.onload = function(){
//measure(modifyDOM1,'modifyDOM1');
measure(modifyDOM2,'modifyDOM2');
}

</script>
</head>
<body>
<div id="measure_result"></div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<p>brown<br>fox jumps<b> over</b> a lazy dog</p>
<div>brown<br>fox jumps<b> over</b> a lazy dog</div>
<!--
-->
</body>
</html>

profiling result :

Firefox 2
modifyDOM1 : 3735
modifyDOM1 : 3938
modifyDOM2 : 3985
modifyDOM2 : 3953
modifyDOM2 without deleting collectTemp : 4266
modifyDOM2 without deleting collectTemp : 3844

IE 6
modifyDOM1 : 45234
modifyDOM1 : 45797
modifyDOM2 : 4718
modifyDOM2 : 4734
modifyDOM2 without deleting collectTemp : 4766
modifyDOM2 without deleting collectTemp : 4750

Opera 9
modifyDOM1 : 48359
modifyDOM1 : 48344
modifyDOM2 : 5313
modifyDOM2 : 5453
modifyDOM2 without deleting collectTemp : 5141
modifyDOM2 without deleting collectTemp : 5016
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<td> height problem 4
Issue with textbox script? 0
Input Controls 4
Help with code 0
Initial letters of the words in a string 9
How to position the *tooltip* comment on these buttons? 9
Substituting with regular expressions, in place 7
Graph of quadratic function with CanvasRenderingContext2D 2

Members online

Total: 355 (members: 3, guests: 352)
Robots: 453

Forum statistics

Threads
473,968
Messages
2,570,150
Members
46,697
Latest member
AugustNabo

Latest Threads

Top