Question

I have a script that has a few timeouts, draws a menu using Raphael and uses all sorts of dynamic properties to accomplish this. You can take a look at it over at jsfiddle: JSFiddle version of my code

My problem is that Firefox, just occasionally, throws the “a script is running slowly etc.” error when this page is open, might be after half a minute or more. Typically I’ll have hovered over one element or so, so one sub menu is open at this time. The error usually doesn’t point to any of my js files, sometimes even Firefox’s own files.

How do I debug this, is it possible at all? Any tips are appreciated. (I’m using chronos for the timers now, didn’t seem to help)

Answer 1

Profile your code

You probably want to do Profiling, i.e. performance analysis of your code. As others have pointed out, Firebug is a good tool in Firefox. More specifically: In Firebug, click Profile in the Console tab. Then play with your navigation a bit and click Profile again to finish the analysis and get the results. They will tell you which functions were called how often and how long their execution took. This will help you identify performance bottlenecks in your code.

Optimize

On a quick glance I would say you could probably still optimize the DOM queries. Save references to the results of your expensive queries. And use contexts if possible, to make queries more efficient.

Also, requestAnimationFrame() seems to be the way to go for javascript animations now, instead of setTimeout().