jQuery (or textOverflow) taking too long

When we detect Firefox, we call

jQuery('.trunc').textOverflow();

but if the page is long, Firefox puts up the "unresponsive script" alert. I believe the actual problem is in the initial jQuery call (when it finds all matching DOM elements by their CSS).

I'm no jQuery expert but it looks like it really favors a style where it builds up lists of selected items and passes them down a chain. So there may not be a great 开发者_JS百科workaround. But, is there one? I don't care about chaining, I just want to send textOverflow to relevant elements.

It would depend on how many elements you are talking about, however the class selector you have should be very fast in Firefox, even with many elements. This is because Firefox supports the getElementsByClassName native method... so the selector you have would essentially be the same as a call to document.getElementsByClassName("trunc").

I think that the culprit would be the textOverflow calls because Firefox doesn't natively support this CSS feature, so I'd imagine the textOverflow plugin would be doing a lot of string processing/DOM/CSS manipulation to get the proper text-overflow behavior.

You could test this out by just calling the selector without the textOverflow() call and see how long it takes:

var truncElements = $('.trunc');

If the code above runs quickly on your large pages in Firefox, then I'd blame textOverflow.

A little bit of a shot in the dark, but you may want to try altering the selector to include the tag name as well. Since this avoids querying the entire DOM, and limits it to just those tags, it will be more efficient.

jQuery('span.trunc').textOverflow();

Replace span with the relevant tag. Not sure if it'll make a difference, but it's more efficient anyways :)

Good luck!