YSlow is a popular tool for measuring and tweaking site performance. The tool recommends that Javascript be put at the bottom of the page (since javascript blocks the page until its loaded). However one of the challenges of doing this is that you cannot call any javascript function (that you have defined in your js files) before the files are loaded. This can be a serious limitation if you are doing a dynamic website where the header and footer (which is where the script tags are inserted) is static and all the dynamic content is in the middle of the page. If you have used any Ruby on Rails or similar framework, you know what I mean. Basically, its hard to put different code in the footer for different pages.
Lets take an example from Muziboo. I have a function in javascript to initialize the flash player Muziboo.Player.embedSingle(). If my script tags (for including the js) are in the header, I can make this call anywhere on the page and it will work. However if the javascript files are loaded last, this call has to be made after loading the javascript.
However you can overcome this limitation by using a javascript queue that holds the function calls till the external javascript files are loaded. Once the javascript is loaded, it can look at the queue and process the messages. So something like this would work
This idea is not new and is used by Google Analytics’ async tracking code. Lets see how to implement such a queue in javascript (using the prototype.js javascript library)
The queue is nothing but a simple javascript array. The process message simply pops out each message, executes it and then changes the push method on _muzq object to execute the message instead of storing it (since now the js is loaded and there is no need to wait). I am still trying to find out a better way than to use eval but this implementation works.
Great solution Prateek. I was searching for something similar, thanks a lot.
Link | June 17th, 2010 at 8:58 am
Surely the line:
Muziboo.Queue.process();
Requires that the script you are calling asynchronously, has fully loaded. Doesn’t the loop that processes the array of funtion calls in _muzq need to be called after the .js file is complete?
Link | December 21st, 2010 at 9:56 am
Hi Mark,
Since the function is in a script tag after the tag that includes javascript, it will always work. You can always put it in an onready to make sure the dom is fully loaded
Prateek
Link | December 21st, 2010 at 1:27 pm
turns out I am doing this anyway:
(function() {
function async(){
var s = document.createElement(’script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘async.js’;
var x = document.getElementsByTagName(’script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(’onload’, async);
else
window.addEventListener(’load’, async, false);
})();
Brain didn’t want to understand what the hell was going on. I’ve managed to force this in now. Trying to reverse engineer the google tag was not a productive exercise.
The example you’ve set out is very clear.
Link | December 21st, 2010 at 4:39 pm