A little while ago I opined that do/while loops are harder to
read than for loops, and therefore I preferred using for loops.
However, it was pointed out that do/while has significant
performance benefits as evidenced by:
<URL:http://www.websiteopti mization.com/speed/10/10-2.html>
(There's a bug in the page, testLoop is both a function name
and the name of the form but if you download the page & rename
the function and the call, all is OK)
So having written a poorly performing 'getElementsByC lassName'
(gEBCN) function using for, I re-wrote the function using
do/while reversed which the above link would have me believe
provides a huge benefit in speed.
Using do/while reversed provides about 23% reduction in time
(averaged over 20 or so runs).
It has also been said that testing the length of an array or
collection each iteration is slower than storing it in a variable
and testing against that, i.e.
for (var i=0; i<anArray.lengt h; i++)
is slower than:
for (var i=0, j=anArray.lengt h; i<j; i++)
So I tested that too. Remarkably, that provides almost as big a
saving as do/while loop, 22%.
Finally, I tried a reversed for, but it was slower than a forward
loop probably because it had to evaluate i>=0 rather than i<n.
So it seems to me that for most purposes, users will not tell any
difference between a for loop and the most optimised do/while,
provided the test parameter is a constant and not some evaluated
value (as per the second for example above).
Comments?
Note: uncommenting the alerts makes the scripts report
slower times, even though the alerts are after the timed
script has finished.
--
Rob
<script type="text/javascript">
// Standard for loop
function getElementsByCl assNameA(c) {
var cArray = [];
var n = document.getEle mentsByTagName( 'body')[0];
var z = new RegExp('\\b' + c + '\\b');
function doTree(n) {
if (n.className && z.test(n.classN ame)){
cArray.push(n);
}
// Standard (slowest) loop
// for (var i=0; i<n.childNodes. length; i++) {
// using a constant forward (fastest)
for (var i=0, nLen=n.childNod es.length; i<nLen; i++) {
// using a constant and reversed loop
// for (var i=n.childNodes. length-1; i>=0; --i) {
doTree(n.childN odes[i]);
}
}
doTree(n);
return cArray;
}
// do/while reversed
function getElementsByCl assNameB(c) {
var cArray = [];
var n = document.getEle mentsByTagName( 'body')[0];
var z = new RegExp('\\b' + c + '\\b');
function doTree(n) {
if (n.className && z.test(n.classN ame))
cArray.push(n);
var i = n.childNodes.le ngth;
if (i) {
do {
doTree(n.childN odes[--i]);
} while (i)
}
}
doTree(n);
return cArray;
}
// just counts elements in document
function countElements() {
var c = '0';
var n = document.getEle mentsByTagName( 'body')[0];
function doCount(n) {
for (var i=0; i<n.childNodes. length; i++) {
c++;
}
}
doCount(n);
return c;
}
</script>
<table><tr><t d>
<button onclick="
var s = new Date();
var classArray = getElementsByCl assNameA('rob') ;
var f = new Date();
var t = f-s;
var c = countElements() ;
var u = Math.floor(t/c*1000);
/*
alert('That took ' + t + 'ms\n\n'
+ 'Element count: ' + c
+ '\nPer element: ' + u + ' microsecond');
*/
document.getEle mentById('A').v alue += '\n' + t;
">Standard for</button>
</td>
<td>
<input type="button" value="do/while reversed" onclick="
var s = new Date();
var classArray = getElementsByCl assNameB('rob') ;
var f = new Date();
var t = f-s;
var c = countElements() ;
var u = Math.floor(t/c*1000);
/*
alert('That took ' + t + 'ms\n\n'
+ 'Element count: ' + c
+ '\nPer element: ' + u + ' microsecond');
*/
document.getEle mentById('B').v alue += '\n' + t;
">
</td></tr>
<tr>
<td><textarea rows="20" cols="10" id="A"
value=""></textarea></td>
<td><textarea rows="20" cols="10" id="B"
value=""></textarea></td>
</tr>
</table>
