Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout thrashing in data label creation #1092

Open
dpraul opened this issue Oct 18, 2019 · 0 comments
Open

Layout thrashing in data label creation #1092

dpraul opened this issue Oct 18, 2019 · 0 comments

Comments

@dpraul
Copy link
Contributor

dpraul commented Oct 18, 2019

Description

When data labels are enabled, chart generation in data-dense charts takes a particularly long time. This is because the label-creation code calls getBoundingClientRect on each point created to ascertain the width/height (depending on chart type). Calling this function in the way it is done causes the browser to perform a synchronous reflow of the entire page - performing it over many points repeatedly does this for each point, which is a huge performance bottleneck called layout thrashing.

Steps to check or reproduce

  1. Build a chart that uses data.labels
  2. Observe that redrawText takes an inordinate amount of time as a result of the layout thrashing.

The screenshot below captures the performance profile for this function. Observe the red flags all noted below redrawText - this is the profiler noting all the reflows occurring as a result of the call to getBoundingClientRect.

image

Related to #757

@netil netil added this to the 2.0-next milestone Mar 3, 2020
@netil netil removed this from the 2.0-next milestone Jul 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants