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

Sunday, July 6, 2008

US Government against radio ?

Although this is totally unrelated to JavaScript, in any way, I think the community as a whole will understand how important this is.

A few months ago, I received several emails stating that the new internet regulations may bring down internet radio sites such as pandora and others.  Today, I received an email that really disturbed me. The government was going to cut funding on the SETI@Home project.  Is the US Government opposed to radio waves?

Seriously, I thought it funny for a second, but the seriousness of the matter is at hand.

Please take a moment to help us SAVE ARECIBO.

http://setiathome.berkeley.edu/arecibo_letter.php

and generate letters to submit to Congress.  I am urging all who read this take the time to print out the letters it generates and mail them through snail mail. Electronic mail too often gets discarded, and physical letters make a bolder statement.

Thank you for caring about such an important project to save the Arecibo Observatory, the world's largest radio telescope at the Berkeley.
Blogged with the Flock Browser

Wednesday, July 2, 2008

JS::YUI::Loader

For all you perl fans out there, there is a CPAN module for using YUI's loader

JS::YUI::Loader - Robert Krimen

Has all basic bells and whistles, but only supports native YUI components. There doesn't seem to be a way to Add a module "out of the box".

Perhaps you could extend this module and include a hash of files and their properties to get at your own custom libs.
Blogged with the Flock Browser

Not Sure ...

Not sure if Ajaxian gets it right here when comparing modules.js to YUI

"Compared to YUI Loader

YUI Loader uses a static dependency table to ensure that YUI modules
are loaded in the correct order. This means that third party modules
have to monkey patch this table if they have inter-module
dependencies. It's similar to modules.js in that it uses XHR."


I have build a perl modules loader based on YUI Loader, and although I do notice some dependency issues, it is perfectly possible to setup dependencies with monkeying around with YUI's dependency table. Possible they were looking at an old version?

I have noticed that I have to specify prototype separate though. It seems it must be included first within the "requires" array property.


Blogged with the Flock Browser

YUI Autogrid

Ajaxian's own Christian Heilmann has posted a solution for resizing YUI Tempate and Grid elements (yui-t and yui-g) to allow for a dynamic site look based on the browser, and viewport.

Full Article - YUI Autogrid: Correctly resize the grids

Since we do not have variables in CSS (as of this writing i believe it is the current specification) we cannot properly resize the page layout according to the size of the viewport, and browser.

This library will determine where the doc root is (doc, doc2, doc3 doc4 etc), determine the yui-t template, and pick the best doc type and template to display the page using the most page real estate.

This is probably very useful for all of you out there with picky clients who just can't decide which looks right. This is the best of all worlds.
Blogged with the Flock Browser