How well does JavaScript scale?

Question

I was working on this carousel thing, using the iCarousel. It works pretty nicely with a few images, using MooTools. However when I added 70 pictures (around 30k each) it stopped working so nicely. Having spent some time poking around in the code of iCarousel it looked pretty decent and stable. So this got me thinking: is the problem inherent to the script (which animates divs inside an overflow:hidden div), MooTools, Firefox on Ubuntu or that JavaScript cannot handle too much? If so, how much is too much?

I guess it's hard to say, but it would be really decent to know when JavaScript will become sluggish and unusable, preferably before starting to develop.

Answer 1

Looking at the sample code, I noticed something like this being done:

 $("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});  
 $("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});  
 $("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});  
 $("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});  
 $("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});  
 $("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});  
 $("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)}); 

If you have 70 images (and thus 70 thumbnails, I'm assuming) this would be wiring 70 events to the DOM. This is really not necessary and is most likely the cause of the "sluggish" behavior you are observing. I suggest you read up on event delegation and why it is a good thing. :) If you are using jQuery, this is easily done by using the live function, I would imagine mootools would have something similar. If it doesn't, though, it is fairly easy to rig up. I have discussed event delegation in the past here and here.