Mick White wrote:
Yann-Erwan Perio wrote:
One that should increase the speed considerably is the for loop:
Change from
for (i = 0; i < allFields.length; i++) {
to
for (var i = allFields.length; i--;) {
or:
x=allFields.length;
while(x--){ do stuff with x}
Mick
<script type="text/javascript">
for (var test = 0; test < 5; test++) {
document.write('<p>Test: ' + test + '<br>');
var start = new Date();
for (var i = 100000; i--;) { var x = 0; }
document.write('for 99999 to 0: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
var start = new Date();
var i = 100000;
while(i--) { var x = 0; }
document.write('while 99999 to 0: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
var start = new Date();
for (i = 0; i < 100000; i++) { var x = 0; }
document.write('for 0 to 99999: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
document.write('</p>');
}
</script>
Internet Explorer 6SP1:
Test: 0; for 99999 to 0: 190; while 99999 to 0: 200; for 0 to 99999:
251
Test: 1; for 99999 to 0: 190; while 99999 to 0: 210; for 0 to 99999:
271
Test: 2; for 99999 to 0: 210; while 99999 to 0: 200; for 0 to 99999:
251
Test: 3; for 99999 to 0: 210; while 99999 to 0: 200; for 0 to 99999:
271
Test: 4; for 99999 to 0: 190; while 99999 to 0: 200; for 0 to 99999:
241
While both the decrementing loops are slightly faster then the
incrementing one (on the order of 50ms over 100000 iterations), there
is no clear winner between the while() and for() loops.
Firefox 0.9:
Test: 0; for 99999 to 0: 371; while 99999 to 0: 340; for 0 to 99999:
461
Test: 1; for 99999 to 0: 350; while 99999 to 0: 361; for 0 to 99999:
451
Test: 2; for 99999 to 0: 340; while 99999 to 0: 361; for 0 to 99999:
450
Test: 3; for 99999 to 0: 351; while 99999 to 0: 350; for 0 to 99999:
471
Test: 4; for 99999 to 0: 340; while 99999 to 0: 1913; for 0 to 99999:
451
The odd result was where Firefox prompted me that a script was causing
the browser to run slowly. As with IE, decrementing loops are slightly
faster.
Opera 7.51:
Test: 0; for 99999 to 0: 630; while 99999 to 0: 521; for 0 to 99999:
741
Test: 1; for 99999 to 0: 511; while 99999 to 0: 481; for 0 to 99999:
751
Test: 2; for 99999 to 0: 501; while 99999 to 0: 480; for 0 to 99999:
751
Test: 3; for 99999 to 0: 501; while 99999 to 0: 481; for 0 to 99999:
751
Test: 4; for 99999 to 0: 501; while 99999 to 0: 610; for 0 to 99999:
752
Similar results.
Netscape 4.78:
Test: 0; for 9999 to 0: 58444; while 9999 to 0: 211; for 0 to 9999:
220
Test: 1; for 9999 to 0: 180; while 9999 to 0: 171; for 0 to 9999: 220
Test: 2; for 9999 to 0: 180; while 9999 to 0: 180; for 0 to 9999: 221
Test: 3; for 9999 to 0: 180; while 9999 to 0: 180; for 0 to 9999: 231
Test: 4; for 9999 to 0: 180; while 9999 to 0: 8703; for 0 to 9999: 240
Other then the odd first and second to last values (most likely due to
garbage collection or some other internal activity), the results are
pretty much on par with the other browsers listed.
So optimizing your loops by decrementing instead of incrementing
achieves an execution speed increase of about 25-50%. That
optimization time could be better spent elsewhere, such as turning a
mess like:
for (var i = 0; i < document.forms['formName'].elements.length; i++) {
var doSomethingWith =
document.forms['formName'].elements[i].value;
}
into:
var f = document.forms['formName'].elements;
for (var i = 0; i < f.length; i++) {
var doSomethingWith = f[i].value;
}
<form name="myForm">
<input type="text" name="myText" value="">
<input type="hidden" name="myHidden" value="">
<input type="radio" name="myRadio" value="">
<input type="checkbox" name="myCheckbox" value="">
<select name="mySelect">
<option value="1">one</option>
</select>
</form>
<script type="text/javascript">
for (var test = 0; test < 5; test++) {
document.write('Test: ' + test + '; ');
var start = new Date();
var f = document.forms['myForm'].elements;
for (var z = 0; z < 100; z++) {
for (var i = 0; i < f.length; i++) {
var x = f[i].value;
}
}
document.write('cached reference: ' + ((new Date()).getTime() -
start.getTime()) + '; ');
var start = new Date();
for (var z = 0; z < 100; z++) {
for (var i = 0; i < document.forms['myForm'].elements.length; i++) {
var x = document.forms['myForm'].elements[i].value;
}
}
document.write('fully qualified: ' + ((new Date()).getTime() -
start.getTime()) + '<br>');
}
</script>
Internet Explorer 6SP1:
Test: 0; cached reference: 50; fully qualified: 171
Test: 1; cached reference: 50; fully qualified: 180
Test: 2; cached reference: 50; fully qualified: 180
Test: 3; cached reference: 40; fully qualified: 181
Test: 4; cached reference: 50; fully qualified: 180
The other browsers listed above (with the exception of Netscape 4.78)
also show an approximate 300-400% increase in speed when accessing
form elements using a cached reference rather then accessing each
fully-qualified DOM reference each time. It seems obvious to me where
a Javascript author's attention should be directed when form
processing is running slowly.
--
| Grant Wagner <gw*****@agricoreunited.com>
* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html
* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_entry.asp
* Netscape 6/7 DOM Reference available at:
*
http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
*
http://www.mozilla.org/docs/web-deve...upgrade_2.html