Javascript FF Slow Chrome/Safari FAST

Question

Here's an interesting conundrum, I have a javascript data viz that runs great in Safari/Chrome and even runs alright in IE. But Firefox it is really really slow. I've noted the section of code that seems to be slowing things down.

The variable stats is var stats = [{"team":"IND","player":"Andrew Luck","position":"QB","round":1,"choice":1,"size":66}, ... ];

Here's the full code. The problem area is at the bottom. Does anyone have any idea why Firefox has problems running this?

(function($){
    $(document).ready(function() {
        var paper = Raphael("graph",390, 1600);

        var selectedteam;
        for (var i = 0 ; i <= 252; i++) {
            var s = stats[i].size*.3;
            stats[i].circles = paper.circle(stats[i].round*50-20, stats[i].choice*20, s*.75)
                .attr({
                        "fill": "RGB(" + (89*.3-s)*14 + ", " + s*8 + ", 100)",
                        "stroke": "RGB(255,255,255)"
                })
            stats[i].circles.player = stats[i].player;
            stats[i].circles.team = stats[i].team;
            stats[i].circles.position = stats[i].position;
            stats[i].circles.mouseout(function() {
                for (var lines in stats) {
                    stats[lines].circles.animate({"opacity": "1"}, 500);
                }
            });
            stats[i].circles.mouseover(function() {
                selectedteam = this.team;
                $('#error').empty().html("<div><p>" + this.player + ", " + this.position + "</p><p>" + this.team + "</p></div>");   
 //****THIS FOR LOOP IS REALLY REALLY SLOW IN FIREFOX*****
                for (var lines=0; lines <=252; lines++) {
                    stats[lines].circles.stop().animate({"opacity": ".1"}, 50);
                    if (selectedteam === stats[lines].team) {
                        stats[lines].circles.stop().animate({"opacity": "1"}, 50);
                    }
                }
            });

        }   
    });
})(jQuery);

Answer 1

Instead of for loops, when dealing with array indexes, you should use every javascript's function to iterate an array or, to avoid compatibility issues, when creating the array wrap it with jQuery expression evaluation ( $() or jQuery() ) and use .each() jQuery's method to iterate.

Try to perform this test in your Firefox to see how it runs.

UPDATED

Found a better loop test here.

Answer 2

I've never used the Raphael library. However, I see that the suspect code is wrapped inside a mouseover handler.

I've had problems in the past where the same DOM event gets fired differently (or not at all) in different browsers.

Have you considered the possibility that the code could appear to be slow because it is getting invoked multiple times somehow?

I would suggest that you try adding something like this to your page:

<span id='counter'>0</span>

Then, write

var counter = parseInt($('#counter').val()),10);
counter++;
$('#counter').val(counter);
for (var lines=0; lines <=252; lines++) {
    stats[lines].circles.stop().animate({"opacity": ".1"}, 50);
    if (selectedteam === stats[lines].team) {
        stats[lines].circles.stop().animate({"opacity": "1"}, 50);
    }        
}

View the resulting page in different browsers and watch what happens with the counter.

I can't promise you this will help find the problem, but it's what I would try first.