plotly / plotly/plotly.js

[BUG]: Color Translation is Costly

Offen
#8,054 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P2 size: 1
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem Scatter-Trace-Rendering-Pfad, der rgb(color_string) und parse(color_string) aufruft; vergleiche ihn mit dem im Bericht erwähnten Memoization-PR. Reproduziere den Benchmark an der 100,000-Marke aus dem Issue und bestätige anschließend, dass der optimierte Lauf das Rendering-Verhalten beibehält und die mediane Laufzeit verbessert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization, performance
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.