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.

Web Browser Performance

Finally, this test gives us the opportunity to examine the load speed of some real-world code – specifically, the performance of evaluating the scripts when they’re retrieved from a cache.

Browser Comparison (loading jquery from cache)

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

There’s a couple things that we can note about the results: