Many sites in this day and age of widespread Web 2.0 fever make use of bucketloads of Javascript. More power to them - I happen to like clever Javascript. The problem with this is that in order to use all of the new functionality, we're often forced to load much more than a single file. Throw in some CSS and we're easily making four or five requests per page.

Sites like digg and flickr, both of which are great, make use of multiple javascript files for their features. This results in having to wait for ages (okay, seconds, but it feels like a long time) for a myriad of requests to be sent and each file downloaded. Once they're all cached things go more smoothly, but on every return trip you have to endure the wait.

While having separate files makes development easier, it doesn't take long to consolidate everything into one file when you publish. Now instead of making eight requests, your users only need to make one, saving a bit of time and some processing power on the server. I was going to stop here and leave it at "trust me on this," but I decided a quantitative analysis would be much better.

For the test, I downloaded all of the separate Javascript files from digg, and then created a consolidated file. I then made two test pages - one that loads eight separate files, and one that loads a single consolidated file. I then put the files on my server and used the very handy Load Time Analyzer extension for Firefox to measure load times.

As you can see, the separate files take twice as long to load as the single, consolidated file. You can also further optimize your scripts by removing comments, extra whitespace, etc. Your users will notice the difference - or at least I will.

My old article on this subject provided code that worked, but wasn't terribly efficient and did a few unnecessary things. I can't let that just sit there, so here's a better way!

For those new to AJAX/Web 2.0/[Buzzword here], one of the main features is the use of an XMLHTTPRequest object to fetch data in the background without actually changing pages. Most examples show you how to do this, but they don't address what happens when you make multiple simultaneous requests. If you're using a global request object, subsequent requests will overwrite previous ones and you'll never receive a response. That's probably not what you want to happen.

[ Read more... ]

This is the old article - my newer, better method can be found here.

If you're using XMLHTTPRequest objects in your AJAX application and you send multiple requests simultaneously, you might notice some problems. There are plenty of examples out there to get you started, but none of them cover this issue (or at least they didn't a year ago).

[ Read more... ]

Welcome to the new and improved Drakware!

I'll be posting articles on a not-so-regular basis in this newer format from now on. Topics will cover XHTML, CSS, Javascript (including AJAX), and possibly some Win32 development, and most articles will probably be of the how-to variety.