Question

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 workaround. But, is there one? I don’t care about chaining, I just want to send textOverflow to relevant elements.

Answer 1

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.