3

这是一个有趣的难题，我有一个 javascript 数据即在 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);
4

3 回答 3

2

而不是 for 循环，在处理数组索引时，您应该使用每个javascript 的函数来迭代数组，或者为了避免兼容性问题，在创建数组时使用 jQuery 表达式评估（ $() 或 jQuery() ）包装它并使用. each() jQuery 的迭代方法。

尝试在你的 Firefox 中执行这个测试，看看它是如何运行的。

更新

在这里找到了更好的循环测试。

于 2012-05-04T17:05:02.120 回答
1

不是“答案”，而是解决方案。我没有为 Raphael 对象的“不透明度”设置动画，而是尝试编辑其“填充不透明度”。这大大加快了速度。当我为“填充-不透明度”和“填充-描边”设置动画时，速度仍然有很大的提高。

我仍然不确定为什么动画不透明度更改需要这么多资源来执行。

感谢大家！

于 2012-05-06T19:55:14.523 回答
1

我从未使用过 Raphael 库。但是，我看到可疑代码包含在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);
    }        
}

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

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

于 2012-05-04T17:01:57.660 回答