Pre-Caching Flex Applications Using YUI
author: tomI thought a little scenario might assist in prefacing this post.Bob has built a cool Flex application and it now time to show it off to the world. Bob is a web guy, so like most web guys, he uses YSlow to see the performance on his pages. Flex application and YSlow in hand, Bob uploads his files to his web-server. He then realizes that he forgot to ask himself one very important thing, “how big is this Flex application anyway?” To Bob’s dismay, the final size is almost 2 mb! Bob has some options:
- Not caring - he has some decency.
- Revisit code - he has a deadline to meet.
- Play around with RSLs - now he’s getting on the right track.
- Pre-caching the application - getting warmer.
- Pre-caching the application and the Flex framework - tada.
Now back to me…Bob’s best options here are 3, 4, 5. And more specifically 3 and 5. If you aren’t familiar with RSLs (Runtime Shared Libraries) in Flex, I highly recommend them. By implementing RSLs, it becomes possible to cut down the initial file size of the application, only loading libraries when needed.But one still has to load the swf libraries, even if RSLs are utilized. In many scenarios users visit a specific page or URI before accessing or launching a Flex application. For instance, a search page followed by Flex search results. To take advantage of this, why not take employ AJAX? After all, its primary purpose is the asynchronous transmission of data, so AJAX seems like the perfect tool for the job.I chose YUI for this example, but you could use jQuery or something of the like.
//Caching methods using YUI
var flashCache = {
handleSuccess:function(o)
{
this.processResult(o);
},
handleFailure:function(o){ },
processResult:function(o){ },
startRequest:function(url) {
YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
}
};
var callback = {
success:flashCache.handleSuccess,
failure:flashCache.handleFailure,
scope: flashCache
};
//Cache the swf and swz
window.onload = function()
{
flashCache.startRequest("flexApplicaiton.swf");
flashCache.startRequest("framework_3.0.189825.swf");
flashCache.startRequest("framework_3.0.189825.swz");
};
By asynchronously loading the Flex application, Framework while the user is taking a preliminary action, you basically take the 2 mb Flex application (although hopefully it is less because you are using Runtime Shared Libraries) and turn it into 12-40k. Otherwise known as the size of the page which the swf file is embedded. (The photo below is not a real representation of the scenario, but illustrates the difference in cache.)
It is understood that most users who visit your site have an empty cache. However, if you have instances where the user will spend some significant amount of time (enough to load the swf), you and Bob (from the outset) can rejoice in the now optimized speed and total score benchmark you will receive in YSlow…2 mb Flex application included.
Mar 19 2008
