JavaScript widget bottlenecks and bugs beware

Filed under

UPDATE: AHS has been updated to v0.3.9.7 to eliminate the YUI Event.addListener(window, 'resize', function) issue!

Alex Iskold over at Read/Write Web posted a great article about JavaScript's performance impact on blog sites today. Like most blogs, this site relies on several single lines of JavaScript to power interface features, display widgets, and process data. This site, as well as all of the others that load things like Google Adsense, loads a little bit slower.

Alex does an excellent job of outlining the performance issues that all of these JavaScript widgets create and what developers should consider when creating widgets. One of his points, the use of a JavaScript library, is something I've taken to heart lately. It doesn't matter if it's YUI, prototype, dojo, or one of the others in the ever growing list, pick a library suited to your needs and stick with it. Jump on the unobtrusive JavaScript train and you'll immediately see performance and feature benefits contributed by talented groups of corporate and community developers.

As sites incorporate more and more widgets and gadgets, JavaScript developers must evaluate the impact that their code may have on other scripts. I'm not just talking about JavaScript written for web pages, web browser extension developers also need to take heed.

Case in point, I recently had to track down a mysterious bug in a YUI-based script I had written. The bug popped up in Firefox, to my great surprise, and I spent hours tracking recent changes trying to find the cause. After discovering that the bug didn't occur in Firefox on other machines, I began to disable Firefox extensions. It turned out that the autoHideStatusbar (AHS) extension that I had recently installed conflicts with onresize YAHOO.util.Event.addListener instances in YUI.

JavaScript development and testing tools are on the way. Yahoo recently released a unit test component for YUI and YSlow to test site performance, including JavaScript. So, what can you take away from this post?

  • JavaScript libraries are the bee's knees
  • JavaScript needs to evolve to address performance and conflict issues
  • Until JavaScript evolves, it's up to developers to test that their scripts are optimized and play nicely with others
  • Disable Firefox extensions when developing and debugging JavaScript!