3

ここに興味深い難問があります。私は、Safari/Chrome でうまく動作し、IE でも問題なく動作する JavaScript データ Viz を持っています。しかし、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 ライブラリを使用したことがありません。ただし、疑わしいコードが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 に答える
1

「答え」ではなく、解決策です。Raphael オブジェクトの「不透明度」をアニメートする代わりに、「塗りつぶし不透明度」を編集してみました。それは物事を大幅にスピードアップしました。「塗りつぶし不透明度」と「塗りつぶしストローク」の両方をアニメーション化すると、速度が大幅に向上しました。

不透明度の変更をアニメーション化するために実行するのに非常に多くのリソースが必要な理由はまだわかりません。

みんな、ありがとう！

于 2012-05-06T19:55:14.523 に答える