| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | |
|---|
| 4 | <title>Live Collections</title> |
|---|
| 5 | |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | |
|---|
| 8 | tbody th { text-align: right; font-weight: normal; } |
|---|
| 9 | th, td { padding: 0 0.4em; } |
|---|
| 10 | |
|---|
| 11 | </style> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript"> |
|---|
| 14 | |
|---|
| 15 | function bench () { |
|---|
| 16 | var div = document.createElement("div"); |
|---|
| 17 | var span = "<span><" + "/span>"; |
|---|
| 18 | |
|---|
| 19 | for (var i = 0; i < 11; i++) { span += span; } |
|---|
| 20 | div.innerHTML = span; |
|---|
| 21 | |
|---|
| 22 | |
|---|
| 23 | var el, i = 0, els = div.getElementsByTagName("span"); |
|---|
| 24 | while (el = els[i++]) { } |
|---|
| 25 | |
|---|
| 26 | |
|---|
| 27 | tic(); |
|---|
| 28 | var els = div.getElementsByTagName("span"); |
|---|
| 29 | for (var i = 0; i < els.length; i++) { var el = els[i]; } |
|---|
| 30 | toc("for loop, accessing length"); |
|---|
| 31 | |
|---|
| 32 | tic(); |
|---|
| 33 | var el |
|---|
| 34 | for (var i = 0; el = div.getElementsByTagName("span")[i]; i++) { } |
|---|
| 35 | toc("for loop, calling inline"); |
|---|
| 36 | |
|---|
| 37 | tic(); |
|---|
| 38 | var el, i = 0; |
|---|
| 39 | while (el = div.getElementsByTagName("span")[i++]) { } |
|---|
| 40 | toc("while loop, calling inline"); |
|---|
| 41 | |
|---|
| 42 | tic(); |
|---|
| 43 | var el, els = div.getElementsByTagName("span"); |
|---|
| 44 | for (var i = 0; el = els[i]; i++) { } |
|---|
| 45 | toc("for loop, accessing var"); |
|---|
| 46 | |
|---|
| 47 | tic(); |
|---|
| 48 | var el, i = 0, els = div.getElementsByTagName("span"); |
|---|
| 49 | while (el = els[i++]) { } |
|---|
| 50 | toc("while loop, accessing var"); |
|---|
| 51 | } |
|---|
| 52 | |
|---|
| 53 | function tic () { |
|---|
| 54 | tic.time = new Date(); |
|---|
| 55 | } |
|---|
| 56 | |
|---|
| 57 | function toc (str) { |
|---|
| 58 | var time = new Date().getTime() - tic.time.getTime(); |
|---|
| 59 | var p = document.createElement("p"); |
|---|
| 60 | p.appendChild(document.createTextNode(time + " - " + str)); |
|---|
| 61 | document.body.appendChild(p); |
|---|
| 62 | } |
|---|
| 63 | |
|---|
| 64 | </script> |
|---|
| 65 | |
|---|
| 66 | <h1>Live Collections</h1> |
|---|
| 67 | |
|---|
| 68 | <p><strong style="color:red">Warning:</strong> these benchmarks will take a number of seconds to run. Other system activity will cause these benchmarks to skew. |
|---|
| 69 | <p><a href="javascript:bench()">Run benchmarks</a> |
|---|
| 70 | |
|---|
| 71 | <h2>Results</h2> |
|---|
| 72 | |
|---|
| 73 | <p>The results should not be compared between browsers for they are run on different systems, however results for the same browser are relative to each other. |
|---|
| 74 | |
|---|
| 75 | <table> |
|---|
| 76 | <thead> |
|---|
| 77 | <tr> |
|---|
| 78 | <th> |
|---|
| 79 | <th>IE |
|---|
| 80 | <th>Safari |
|---|
| 81 | <th>Gecko |
|---|
| 82 | </tr> |
|---|
| 83 | </thead> |
|---|
| 84 | <tbody> |
|---|
| 85 | <tr> |
|---|
| 86 | <th>for loop, accessing length |
|---|
| 87 | <td>172 |
|---|
| 88 | <td>32 |
|---|
| 89 | <td>1039 |
|---|
| 90 | </tr> |
|---|
| 91 | <tr> |
|---|
| 92 | <th>for loop, calling inline |
|---|
| 93 | <td>47 |
|---|
| 94 | <td>601 |
|---|
| 95 | <td>417 |
|---|
| 96 | </tr> |
|---|
| 97 | <tr> |
|---|
| 98 | <th>while loop, calling inline |
|---|
| 99 | <td>31 |
|---|
| 100 | <td>604 |
|---|
| 101 | <td>412 |
|---|
| 102 | </tr> |
|---|
| 103 | <tr> |
|---|
| 104 | <th>for loop, accessing var |
|---|
| 105 | <td>16 |
|---|
| 106 | <td>12 |
|---|
| 107 | <td>475 |
|---|
| 108 | </tr> |
|---|
| 109 | <tr> |
|---|
| 110 | <th>while loop, accessing var |
|---|
| 111 | <td><strong>15</strong> |
|---|
| 112 | <td><strong>11</strong> |
|---|
| 113 | <td><strong>349</strong> |
|---|
| 114 | </tr> |
|---|
| 115 | </tbody> |
|---|
| 116 | </table> |
|---|