Josh,
>Just tried the uncompressed, same problem, long running script.
>
>Here is a link, PLEASE DON'T CLICK AROUND, just view in IE6 and you'll
>see the alert.
>
>http://www.calabunga.com/main/pagesource.html
>
>It's a massive page, over a MB, I'm sure that is part of the problem
>but how do I rectify?
That *is* the problem.
When you running very generic selectors over a large DOM, it takes a while
to process.
For example you have code like:
$(".poplink")
In order to honor that selector, jQuery is going to need to look at *every
single element* in your document for a match. That's a ton of processing.
You need to look at ways to reduce the number of elements jQuery needs to
parse. The best way to do this is to increase specifity of your selectors.
You also need to look at ways to cache your results so that you're not
repeating the same selectors over and over. So, instead of:
// timespan display open/close
$("#display_len").change(function() {
if ($(this).val() == 1) {
$("#daymode1").show("fast");
}
else {
$("#daymode1").hide("fast");
}
});
$("#display_len").change();
Do:
var jqTimeOpenClose = $("#display_len");
// timespan display open/close
jqTimeOpenClose.change(function() {
if ($(this).val() == 1) {
$("#daymode1").show("fast");
}
else {
$("#daymode1").hide("fast");
}
});
jqTimeOpenClose.change();
You could even chain that code if you choose:
// timespan display open/close
jqTimeOpenClose
.change(function() {
if ($(this).val() == 1) {
$("#daymode1").show("fast");
}
else {
$("#daymode1").hide("fast");
}
})
.change();
Now I've never tried this, so I'm not sure how well it would work, but if
you can't really improve the specifity of your selector, you might try
creating a jQuery collection containing all the classes you need to collect:
var jqItems = $(".additem,.edititem,.deleteitem");
This would only require a single loop through the DOM collection. You could
now do:
// mouseover for items area - add
jqItems.filter(".additem").
.mouseover(function() {
$(this).addClass("dayon");
})
.mouseout(function() {
$(this).removeClass("dayon");
}
);
This should be a little more efficient since you're only looping through a
smaller subset.
The bottom line is with a DOM this large, you're going to have speed issues
parsing everything on-the-fly.
This is when I normally break the "unobtrusive" nature of jQuery and bind
events the old fashion way. It's sometimes the only way to get reasonable
performance.
-Dan
