Question

这是一个有趣的难题，我有一个javascript数据viz，在Safari / Chrome中运行得很好，甚至可以在IE中运行。但Firefox真的很慢。我已经注意到代码部分似乎在减慢速度。

变量统计信息为var stats = [{"team":"IND","player":"Andrew Luck","position":"QB","round":1,"choice":1,"size":66}, ... ];

这是完整的代码。问题区域位于底部。有谁知道为什么Firefox运行这个有问题？

(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

代替for循环，在处理数组索引时，你应该使用every javascript的函数来迭代一个数组，或者为了避免兼容性问题，在创建数组时用jQuery表达式求值（$（）或jQuery（））并使用.each() jQuery的方法进行迭代。

尝试在Firefox中执行this test，看看它是如何运行的。

<强>已更新

找到了更好的循环测试here。

Answer 2

我从未使用过拉斐尔图书馆。但是，我发现可疑代码包含在mouseover处理程序中。

过去我遇到的问题是，在不同的浏览器中，同一个DOM事件的触发方式不同（或根本没有）。

您是否考虑过代码可能看起来很慢的可能性，因为它会以某种方式被多次调用？

我建议您尝试在页面中添加以下内容：

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

然后，写

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);
    }        
}

在不同浏览器中查看生成的页面，并观察计数器发生的情况。

我不能保证你这有助于找到问题，但这是我首先要尝试的。

Answer 3

不是“答案”，而是解决方案。我没有动画Raphael对象的“不透明度”，而是试图编辑它的“填充不透明度”。这大大加快了速度。当我为“填充不透明度”和“填充笔划”制作动画时，仍然有很大的速度提升。

我仍然不确定为什么动画不透明度变化需要这么多资源才能执行。

谢谢大家！

Javascript FF Slow Chrome / Safari FAST

3 个答案: