plotly / plotly/plotly.js

[BUG]: Color Translation is Costly

オープン
#8,054 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

bug P2 size: 1
主要言語
JavaScript
スター
18.3k
フォーク
2k
平均マージ
2日 12時間
マージ済み PR(30日)
28

説明

Description

When rendering a scatter trace, we run rgb(color_string) and parse(color_string) four times for every mark. For the vast majority of scatter charts, this is wasteful re-computation.

Surprisingly, this string parsing appears to be a serious bottleneck. Removing it seems to provide a 2x speed improvement for charts with large numbers of marks.

Screenshots/Video
Image
Steps to reproduce

Run npm start.
In the the console run:

const gd = document.getElementById('graph');
const n = 1e5, x = new Float64Array(n), y = new Float64Array(n);
for (let i = 0; i < n; i++) { x[i] = i; y[i] = Math.sin(i / 500); }
const runs = [];
for (let k = 0; k < 5; k++) {
    await Plotly.purge(gd);
    const t = performance.now();
    await Plotly.newPlot(gd, [{type: 'scatter', mode: 'markers', x, y}],
        {width: 900, height: 600}, {displayModeBar: false});
    runs.push(+(performance.now() - t).toFixed(1));
}
runs.sort((a, b) => a - b);
console.log('median', runs[2], runs);

See the numbers. Then test with the memoization PR I've put up and notice the lower numbers.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

rgb(color_string) と parse(color_string) を呼び出す scatter trace のレンダリングパスから始め、レポートで言及されている memoization PR と比較します。issue にある 100,000 のベンチマークを再現し、その後、最適化された実行でレンダリング動作が維持され、中央値の実行時間が改善されることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
data-visualization, performance
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。