Performance issues with c3js

[panthony]

I'm currently struggling with the poor performance of c3js as others do and there is a lot of reasons for that.

• displaying a single line chart (from simple.html) calls getBoundingClientRect 99 times which has a significant cost ( Generating 30+ charts on one page has bad performance #1645 )

• displaying a single line chart will also append and remove from DOM a dummy (to mesure font size) a dozen times per chart (probably because we call updateSizes N times per display)

• it creates and resizes absolutely everything, although there is a single line chart it also create, append and resize the nodes for regions, arcs, titles, grid, the Y2 axis and the X axis for subchart (Too many elements in my SVG #1591)

• each axis is created up to 5 times at render time, meaning for our line chart with 2 real axes we create in reality (with uncached sizing since it's a new instance etc.) 20 axes because we call updateScales/updateSizes multiple times at render time:

  • initWithData -> redraw -> updateDimension -> updateScales
  • initWithData -> updateDimension -> updateScales
  • initWithData -> initLegend -> updateLegendWithDefaults -> updateLegend -> updateScales
  • initWithData -> initLegend -> updateLegendWithDefaults -> updateLegend -> updateSizes
  • initWithData -> updateScales

Basically the browser is taking all its time to modify dom, force relayout, mesure values, modify dom, force relayout, etc.. hundreds of times. (#1067)

There was attempt to cache values with withoutCompute for some parts but more often than not this is not used because the boolean is not passed.

I started trying to opt-out from unused stuff (starting with axes) and I could reduce the 99 calls to getBoundingClientRect to 28 which feels much better on big dashboards but I'm not 100% familiar with the code stack so I can't be sure I'm not breaking some edge cases here and there.

Is there anyone with some knowledge of the code stack that would be interested in trying to improve the performance? Is it worth it to try and do thing nicely and create PRs to this repository?

[conceptualspace]

+1

nice summary of the issues. any code u can share from the changes you mentioned above to eliminate calls to getBoundingClientRect?

see also the alternative approach of rendering with canvas: #1436

as there could be limitations to svg even with an optimal rendering pipeline: #1075

[panthony]

@conceptualspace I removed the withoutRecompute and made it the default behavior, the cache is manually cleared when data is (re)loaded (cogniteev@48c7f5b).

Also, I opt-out a bunch of stuff when not used like subcharts (cogniteev@33b7a85), y2Axis (cogniteev@800164b) and others (d98423d) which save a massing amount of works.

The thing is that I do not use the API at all to load data so I may have broken part of the API when data is loaded on the fly and add new axis.

[conceptualspace]

unfortunately i cant comment on what/if it breaks anything. that said i dropped your fork into one of my projects and instantly got 30% more boost. so i would endorse a PR 👍

[panthony]

@conceptualspace It's more certainly is, unfortunately there is a lack of tests which make it difficult to refactor with the certitude to not break anything.

And I really can't spend time writing tests on features I do not use.

[conceptualspace]

i hear u..