Javascript FF 慢 Chrome/Safari FAST答案

【问题标题】：Javascript FF Slow Chrome/Safari FASTJavascript FF 慢 Chrome/Safari FAST
【发布时间】：2012-05-07 19:35:23
【问题描述】：

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

变量stats是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);

【问题讨论】：

我不知道这是否可行，但请尝试一下：而不是 for(var lines=0;lines
将不透明度改为 0 而不是 0.1 会更快吗？只是在这里猜测。
我已经完全删除了 animate() 并替换为直接更改 svg 属性。还是很慢！我不认为这是动画（）。 Parth Thakkar，替换了代码，但仍然没有。
您正在测试的浏览器版本是什么（Chrome、Firefox、IE、Safari）？
你真的应该进一步精简这段代码以解决问题的实质。

标签： javascript jquery optimization raphael

【解决方案1】：

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

尝试在您的 Firefox 中执行 this test 以查看其运行情况。

更新

找到更好的循环测试here。

【讨论】：

【解决方案2】：

我从未使用过 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);
    }        
}

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

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

【讨论】：

感谢您的建议！我在mouseover 上触发的代码中添加了一个计数器，每次我进入一个新圈子时它都会正常触发。谢谢，虽然这是个好主意。
好的，那么，我同意@Phrogz 的建议，接下来要尝试的是进入循环中的代码并在您正在执行的函数中查找某些内容以查看它们是否正在运行在循环的部分或全部迭代中放慢速度。

【解决方案3】：

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

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

谢谢大家！

【讨论】：