Tuesday, July 29, 2008

Feasability of combining files for faster performance

At the YUI Blog there has been an on going blog on Website Performance and YUI. In part 6 the YUI blog goes into combining files for faster performance. There was also a post on Non-blocking JavaScript Downloads. Trying to implement these methods is preferable, but how easy is it?

I guess that depends on your deployment and programming practices. I like to break up sets of objects and functional blocks into seperate files. For me this means loading several files with a non-blocking method, or compiling the files into a single download. The problem with combining them is that if I have the first file call the second and so on and so forth, I have to remove this code before combining them. So, how can we use YUI's Get functions to download multiple files or a single combined file?

In your main execution path (myFile.html) sample code might look like ...




var js_loaded = function(){
// JS_IS_LOADED

};
YAHOO.util.Event.onDOMReady(
function(){
var js = new Array(
'one.js',
'two.js',
'three.js'
); // Array of files we want
YAHOO.util.Get.script(js, js_loaded);
});



In similiar fashion, if we wanted to get a single script, execute code, then get more script we could chain the callback functions. The files here would load sequentially, and would be executed if the code was structured as a runnable function ie. (function() { ... code to run here ... } ) (); This code would load one.js execute it, and load two.js etc. After it finishes, it would run the js_loaded function (the second parameter to Get's .script method).

It is not advisable to chain a lot of files here. IE really slows down when loading files in this manner. IE one.js has code to load two.js or other files one.js needs. If at all possible, try to load any files as a single download (combined).

Another point to mention here is the dreaded "flicker" effect. If you haven't already loaded your skin.css file in the header, and plan on using Get and the YUILoader with these non-blocking techqniques, you may run into serious flickering as the page first loads css files, and then applies the JS. There are some ways that are pretty obvious to get around this. I prefer to hide the main div tag, the one I set as my doc and template (yui-t) until the main page elements have been rendered. Most browsers take a significant amount of time to adjust styles and apply JS DOM mutations. It is always advisable to hide an element that is getting significant changes to the styles in a long running process. The browsers can render things much faster when that element is hidden.

You may also want to combine this with a YUI Panel to create a Loading effect, but then you would have to load the proper files first.

Therefore, you have to think about the workflow of your page in a very serious manner. What really needs to be loaded and when? What are the dependencies? Can I defer loading something until the user clicks on something (lazy load)? All these factors need to be considered for optimal page load times. We all dont have CDN's to put our libraries on, and ultra fast servers, or multiple domain names to avoid the 2 file per domain restrictions when downloading. So we really have to think what gives our users the best expereince, even if it means at the cost of the "prettiness" of the application.

If the page takes longer than 4 seconds, the users are not getting the best expereince possible.
Blogged with the Flock Browser

No comments: