[charts][sparkline] Heavy layerize time

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://mui.com/material-ui/getting-started/templates/dashboard/
2. See the crazy amount of time spent on "layerize"

Screen.Recording.2025-02-19.at.23.32.02.mov

Current behavior

The popover feels really slow.

Expected behavior

The popover feels shart fast as on https://planner.tremor.so/quotes/monitoring.

Context

I don't know about the others, but for me, experiencing this on the dashboard template is a turn-off to adopting Material UI, I can't quite place it (without knowing this issue, and about the others, this is not just this GitHub issue that creates this feeling), but something about the page feels slow.

Now, if we look closer at what is going on with the layerize time. I find

• https://developer.chrome.com/docs/chromium/renderingng-architecture

• https://webperf.tips/tip/layers-and-compositing/

It turns out that it's very much related to #16018. If I remove the data grid from the page, I remove all the sparklines, the performance issue goes away.

So this means that each time the popover updates its position, we pay the cost of point 4. in #9799 (comment). By removing all the layers in the Sparkline chart, we fix this problem.

Initially I thought it was about using wrong CSS properties, but this seems to have no link https://lab.skk.moe/css-triggers.

Your environment

"@mui/x-charts": "7.26.0",

Search keywords: -