2

オブジェクトの配列として保存されたデータポイントのグラフがあるブラウザベースの視覚化アプリがあります。

data = [
    {x: 0.4612451, y: 1.0511} , 
    ... etc
]

このグラフはd3で視覚化され、キャンバスに描画されています（興味深い議論についてはその質問を参照してください）。これはインタラクティブであり、スケールは大きく変化する可能性があります。つまり、データを再描画する必要があり、特にズームをアニメーション化する場合は、配列を頻繁に繰り返す必要があります。

頭の後ろから、他のJavascriptの投稿を読んで、Javascriptで逆参照を最適化すると、パフォーマンスが大幅に向上する可能性があるという漠然とした考えがあります。Firefoxは、私のアプリの実行速度が非常に遅い（IE9、Chrome、Safariと比較して）唯一のブラウザーであり、改善する必要があります。したがって、私は次のような確固たる信頼できる答えを得たいと思います。

これはどれくらい遅いですか：

// data is an array of 2000 objects with {x, y} attributes
var n = data.length;
for (var i=0; i < n; i++) {
    var d = data[i];
    // Draw a circle at scaled values on canvas
    var cx = xs(d.x);
    var cy = ys(d.y);
    canvas.moveTo(cx, cy);
    canvas.arc(cx, cy, 2.5, 0, twopi);
}

これと比較して：

// data_x and data_y are length 2000 arrays preprocessed once from data
var n = data_x.length;
for (var i=0; i < n; i++) {
    // Draw a circle at scaled values on canvas
    var cx = xs(data_x[i]);
    var cy = ys(data_y[i]);
    canvas.moveTo(cx, cy);
    canvas.arc(cx, cy, 2.5, 0, twopi);
}

xsおよびysはd3スケールオブジェクトであり、スケーリングされた位置を計算する関数です。上記のコードは1秒あたり最大60フレームを実行する必要があり、Firefoxのボールのように遅れる可能性があることを前述しました。私が見る限り、唯一の違いは配列の逆参照とオブジェクトへのアクセスです。どちらがより速く実行され、違いは重要ですか？

4

2 に答える 2

3

これらのループ最適化のいずれかが違いを生む可能性はほとんどありません。このようなループを2000回通過することはほとんどありません。

canvas.arc()Firefoxでの実装が遅い可能性を疑う傾向があります。これは、 PolyGonzoマップcanvas.lineTo()で使用しているため、Firefoxで高速であることがわかっている呼び出しに置き換えることでテストできます。そのページのテストマップの[すべての3199郡]ビューは、合計33,557ポイントの3357ポリゴン（一部の郡には複数のポリゴンがあります）を描画し、それらのポイントごとに同様のキャンバスループをループします。

于 2013-03-27T00:03:27.543 に答える
0

JsPerfの提案のおかげで、私は簡単なテストを実装しました。他の誰かがここに結果を追加してくれれば幸いです。

http://jsperf.com/canvas-dots-testing：3/27/13現在の結果：

ここに画像の説明を入力してください

私はこれまでに次のことを観察しました。

  • 配列とオブジェクトのどちらが優れているかは、ブラウザとOSに依存しているようです。たとえば、ChromeはLinuxで同じ速度でしたが、オブジェクトはWindowsでより高速でした。しかし、多くの場合、それらはほとんど同じです。
  • Firefoxは単なるカメであり、これはMichaelGearyの仮説がcanvas.arc()非常に遅いことを確認するのにも役立ちます。
于 2013-03-27T00:38:01.467 に答える