Nov
26
JavaScript - Cross-browser Performance
November 26, 2007 |
The main objective of modern web developement is to achieve cross-browser compatability, but we can’t ignore thousands of other objectives. One of those that I find very very important is cross-browser performance. Nowadays, web applications are more and more sophisticated, many of these applications can be done in quite many different ways and the performance varies. Below is an example of writing a JavaScript loop using three different ways and calulates the time spent by using each of these three ways.
http://www.lab.highub.com/javascript/performance-and-memory.html
Just to save you some time, here is the list of performance test results I got:
Nascape Navigator
Time badTest took: 63
Time goodTest took: 93
Time betterTest took: 94
Safari
Time badTest took: 26
Time goodTest took: 28
Time betterTest took: 18
IE 7
Time badTest took: 3062
Time goodTest took: 47
Time betterTest took: 16
IE 6
Time badTest took: 3047
Time goodTest took: 78
Time betterTest took: 31
IE 5.5
Time badTest took: 3359
Time goodTest took: 78
Time betterTest took: 47
FireFox
Time badTest took: 47
Time goodTest took: 62
Time betterTest took: 79
Opera
Time badTest took: 15
Time goodTest took: 16
Time betterTest took: 16
The table below is Browser Statistics of yeat 2007
| 2007 | IE7 | IE6 | IE5 | Fx | Moz | S | O |
| October | 21.0% | 34.5% | 1.5% | 36.0% | 1.3% | 1.7% | 1.6% |
| September | 20.8% | 34.9% | 1.5% | 35.4% | 1.2% | 1.6% | 1.5% |
| August | 20.5% | 35.7% | 1.5% | 34.9% | 1.3% | 1.5% | 1.7% |
| July | 20.1% | 36.9% | 1.5% | 34.5% | 1.4% | 1.5% | 1.9% |
| June | 19.7% | 37.3% | 1.5% | 34.0% | 1.4% | 1.5% | 1.8% |
| May | 19.2% | 38.1% | 1.6% | 33.7% | 1.3% | 1.5% | 1.7% |
| April | 19.1% | 38.4% | 1.7% | 32.9% | 1.3% | 1.5% | 1.6% |
| March | 18.0% | 38.7% | 2.0% | 31.8% | 1.3% | 1.6% | 1.6% |
| February | 16.4% | 39.8% | 2.5% | 31.2% | 1.4% | 1.7% | 1.5% |
| January | 13.3% | 42.3% | 3.0% | 31.0% | 1.5% | 1.7% | 1.5% |
Let’s do a simple calulation and see which method is the best, Let’s calculate the average time an end user spend to see the three methods, in the calulation, I use the statistic in October 2007.
Calculation:
badTest average time calculation:
3062 * 0.21 + 3047 * 0.345 + 3359 * 0.15 + 47 * 0.36 + 63 * 0.13 + 26 * 0.17 + 15 * 0.16
goodTest average time calculation:
47 * 0.21 + 78 * 0.345 + 78 * 0.15 + 62 * 0.36 + 93 * 0.13 + 28 * 0.17 + 16 * 0.16
betterTest avarge time calculation:
16 * 0.21 + 31 * 0.345 + 47 * 0.15 + 79 * 0.36 + 94 * 0.13 + 18 * 0.17 + 16 * 0.16
And the results are………….
badTest: 2230, goodTest: 90, betterTest: 67
From the test above, we can see that it’s not hard to tell which is the best way to choose when you are dealing with JavaScript array. But what I am trying to emphasize here is not the test result, which is just a dumb and simple test, what I am trying to emphasize is the kind of scientific attitude towards JavaScript developement, every little detail counts, if your project screws up, you can’t blame the browser, you can only blame the script you coded. We are not living in a perfect world, and there are many things that are not set up ready for us to enjoy, we need to test every simple, silly, small detail again and again. We need to constantly pushing the standards and limits.
Similar Posts
- None Found


































