Friday, December 12, 2008

JavaScript Library Loading Speed

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