Something's slowing down my Javascript code in IE6 to where there's a noticeable lag on hover. It's fine in FF, so using firebug isn't that helpful. What tools are out there to help debug this in IE?
A little more info: I don't think there's actually any JS running on the objects that I'm mousing over. (At least none that I've put in.) Just css :hover stuff. Also, I've got both jquery and dojo running on the project, so who knows what they're doing in the background.
Just a tip of what that "something" could be...
String concatenation in IE is (or at least was when I tested) very slow. Opera finished after 0.2s, Firefox after 4.1s and Internet Explorer 7 still hadn’t finished after 20 minutes!!!
Don't do:
for (var i=0, i < 200; i++) { s = s + "something";}
Instead, temporarily use an array, and then join it:
var s=[];
for (var i=0; i < 200; i++) s.push("something");
s=s.join("");
What I usually do is:
var startTime = new Date();
// Lots of heavy code here
console.log("Processing time: ", new Date() - startTime, " ms");
You can get Firebug lite to get console.log to work across browsers. This gives you an idea about how long any given section of your code takes to execute.
Once you know which is the erring section, you can explore options to fix it.
The lag could also be from a DOM update. When IE needs to re-render a page due to a DOM change, it can be noticeably slower than Firefox. Typically the cursor will freeze when this happens.
Given speedy firefox and slow IE, xpath expressions and event handlers (make sure you're getting the right number of calls, not 10x the expected amount) are nice places to insert timers manually.
I think I've found the source of the slowdown for anyone who's curious: I'm using bgiframe to solve the IE6 select box z-index problem (discussed elsewhere on SO).
