There was an interesting piece of JavaScript performance analysis done recently, by the PBWiki team. They wanted to understand a few things about how quickly JavaScript libraries loaded (obviously, their loading speed grossly effecting the total loading speed of a page). They set up a system to gather input from random browsers, aggregating the results into a final breakdown. There's a lot that application, and browser, developers can learn from the results - the total information available is actually quite profound:
JavaScript Packaging Techniques
When distributing a piece of JavaScript code it's traditional to think that the smallest (byte-size) code will download and load the fastest. This is not true - and is a fascinating result of this survey. Looking at the speed of loading jQuery in three forms: normal, minified (using Yahoo Min), and packed (using Packer). By order of file size, packed is the smallest, then minifed, then normal. However, the packed version has an overhead: It must be uncompressed, on the client-side, using a JavaScript decompression algorithm. This unpacking has a tangible cost in load time. This means, in the end, that using a minifed version of the code is much faster than the packed one - even though its file size is quite larger.
Packaging Comparison (loading jquery, all variants)
Minified | Time Avg | Samples |
---|---|---|
minified | 519.7214 | 12611 |
packed | 591.6636 | 12606 |
normal | 645.4818 | 12589 |
Next time you pick a compression technique, remember this formula:
Total_Speed = Time_to_Download + Time_to_Evaluate
JavaScript Library Performance
The next nugget of information, that we can unearth, is the total performance of JavaScript libraries, when loading within a page (this includes their transfer time and their evaluation time). Thus, a library that is both smaller and simpler will load faster. Looking at the results you can see a, comparatively, large lead for jQuery (200-400ms - a perceptible difference in speed).
Average Time to Load Toolkit (non cached, gzipped, minified)
Toolkit | Time Avg | Samples |
---|---|---|
jquery-1.2.1 | 732.1935 | 3152 |
dojo-1.0.1 | 911.3255 | 3143 |
prototype-1.6.0 | 923.7074 | 3144 |
yahoo-utilities-2.4.0 | 927.4604 | 3141 |
protoculous-1.0.2 | 1136.5497 | 3136 |
Now, some might argue that testing the speed of un-cached pages would be unfair, however according to Yahoo's research on caching, approximately 50% of users will never have the opportunity to have the page contents be cached. Thus, making sure that you page loads quickly both on initial load, and subsequent loads, should be of the utmost importance.
Average Time to Load Toolkit (cached, gzipped, minified)
Toolkit | Time Avg | Samples |
---|---|---|
yahoo-utilities-2.4.0 | 122.7867 | 3042 |
jquery-1.2.1 | 131.1841 | 3161 |
prototype-1.6.0 | 142.7332 | 3040 |
dojo-1.0.1 | 171.2600 | 3161 |
protoculous-1.0.2 | 276.1929 | 3157 |
Once you examine cached speeds the difference becomes much less noticeable (10-30ms difference - with the exception of Prototype/Scriptaculous). Since these results are completely cached we can gauge, roughly, the overhead that's provided by file transfer, in comparison to evaluation speed).
If nothing else, I think this type of analysis warrants further examination. Using user-generated input, against live datasets, to create real-world performance metrics is quite lucrative to everyone involved - to users, framework developers, and browser vendors.
» More information on the web browser performance shown below.
Browser | Time Avg | Samples |
---|---|---|
Firefox 3.x | 14.0000 | 2 |
Safari | 19.8908 | 284 |
IE 7.x | 27.4372 | 247 |
IE 6.x | 41.3167 | 221 |
Firefox 2.x | 111.0662 | 2009 |
Opera 5.x | 925.3057 | 157 |
No comments:
Post a Comment