Développeur front-office, Drupal themeur en Auvergne
+ Todo list

Quelle est la manière de coder les boucles en Javascript la plus rapide (while do, for, arr.forEach, etc.)

2
28 juillet 2008 à 18:50

http://blogs.sun.com/greimer/entry/best_way_to_code_a

I built a loop benchmarking test suite for different ways of coding loops in JavaScript. There are a few of these out there already, but I didn't find any that acknowledged the difference between native arrays and HTML collections. Since the underlying implementations are different (HTML collections for example lack the pop() and slice() methods, etc), benchmarks that don't test against both are probably missing important information.

My suspicions were confirmed. Accessing the length property is more expensive on HTML collections than on arrays, depending on the browser. In those cases, caching it made a huge difference. However, HTML collections are live, so a cached value may fail if the underlying DOM is modified during looping. On the other hand, HTML collections will never be sparse, so the best way to loop an HTML collection might just be to ignore the length property altogether and combine the test with the item lookup, since you have to do that anyway:

Native Array (length=1000, looped 100 times)
Basic for loop. for (var i=0; i<arr.length; i++) { } 8ms
For loop, but caching the length. for (var i=0, len=arr.length; i<len; i++) { } 5ms
While loop that imitates a for loop. var i = 0; while (i < arr.length) { i++; } 7ms
While loop that imitates a for loop, caching the length. var i = 0, len = arr.length; while (i < len) { i++; } 4ms
While loop in reverse, simplifying the test condition. var i = arr.length; while (i--) { } 2ms
do ... while loop in reverse. var i = arr.length-1; do { } while (i--); 3ms
While looping by popping values (this fails on sparse arrays). var x; while (x = arr.pop()) { } 10ms
for ... in loop for (var i in arr) { } 30ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in arr) { if(!isInt.test(i)){continue;} } 206ms
For loop, testing on existence rather than length (this fails on sparse arrays). for (var i=0; arr[i]; i++) { } 5ms
For loop, testing on existence rather than length, plus array lookup. for (var i=0; arr[i]; i++) { var x = arr[i]; } 9ms
For loop, testing on existence rather than length, array lookup is combined with test. for (var i=0, x; x = arr[i++];) { } 5ms
For reference. for (var i=0, len=arr.length; i<len; i++) { var x = arr[i]; } 9ms
Array.forEach() native implementation. arr.forEach(function(x){}); 41ms
For reference against forEach(). var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); } 43ms
Sparse Native Array (length=11698, sporadically populated with 1000 items, looped 100 times)
Basic for loop. for (var i=0; i<sarr.length; i++) { } 111ms
For loop, but caching the length. for (var i=0, len=sarr.length; i<len; i++) { } 59ms
While loop that imitates a for loop. var i = 0; while (i < sarr.length) { i++; } 106ms
While loop that imitates a for loop, caching the length. var i = 0, len = sarr.length; while (i < len) { i++; } 53ms
While loop in reverse, simplifying the test condition. var i = sarr.length; while (i--) { } 31ms
do ... while loop in reverse. var i = sarr.length-1; do { } while (i--); 32ms
for ... in loop for (var i in sarr) { } 36ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in sarr) { if(!isInt.test(i)){continue;} } 197ms
Array.forEach() native implementation. sarr.forEach(function(x){}); 183ms
For reference against forEach(). var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); } 668ms
HTML Collection (length=1000, looped 100 times)
Basic for loop. for (var i=0; i<hColl.length; i++) { } 130ms
For loop, but caching the length. for (var i=0, len=hColl.length; i<len; i++) { } 5ms
While loop that imitates a for loop. var i = 0; while (i < hColl.length) { i++; } 129ms
While loop that imitates a for loop, caching the length. var i = 0, len = hColl.length; while (i < len) { i++; } 4ms
While loop in reverse, simplifying the test condition. var i = hColl.length; while (i--) { } 3ms
do ... while loop in reverse. var i = hColl.length-1; do { } while (i--); 3ms
for ... in loop for (var i in hColl) { } 111ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in hColl) { if(!isInt.test(i)){continue;} } 269ms
For loop, testing on existence rather than length (this fails on sparse arrays). for (var i=0; hColl[i]; i++) { } 133ms
For loop, testing on existence rather than length, plus array lookup. for (var i=0; hColl[i]; i++) { var x = hColl[i]; } 262ms
For loop, testing on existence rather than length, array lookup is combined with test. for (var i=0, x; x = hColl[i++];) { } 137ms
For loop, testing on existence rather than length, array lookup is combined with test, item() instead of array brackets. for (var i=0, x; x = hColl.item(i++);) { } 222ms
For reference. for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; } 138ms
Par matthieu (non vérifié), le 28 juillet 2008 à 20:16.

J'aime pas quand t'écris rien dans tes billets. Bisous

Par Gaby (non vérifié), le 31 juillet 2008 à 12:52.

Quelques commentaires, une petite analyse, un soupçon de conclusion aurait été profitable à cet article. Le copier-coller tout le monde sait le faire, rédigé de bon article est bien plus dur et c'est surtout ce qui donne de l'intérêt à un site / blog.