apache
[Bug] Rendering performance issue
Version
5.5.0
Link to Minimal Reproduction
https://stackblitz.com/edit/vitejs-vite-i5t8vn?file=echarts.js,index.html,main.js&terminal=dev
Steps to Reproduce
The lag issue might be caused by having many elements on the body, a large CSS file, or even due to ECharts itself, but I'm currently not sure. Can see the details in the link provided. When triggering window.onresize, it will console.log the duration. I found that setting canvas.font in brushText takes several tens of milliseconds to execute.
Current Behavior
canvas.font property can sometimes take tens or even hundreds of milliseconds
Expected Behavior
No lag issue.
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
When triggering window.onresize, it will console.log the duration. I found that setting canvas.font in brushText takes several tens of milliseconds to execute.
cannot see any of the aforementioned elements in Minimal Reproduction code
When triggering window.onresize, it will console.log the duration. I found that setting canvas.font in brushText takes several tens of milliseconds to execute.
cannot see any of the aforementioned elements in Minimal Reproduction code
Not sure where is the lag you mean.
In this demo, I've written a large CSS and a large HTML tag in the HTML file. In my work scene, I sometimes need to call setOption twice. When executing the second time, I found that in the brushText function, ctx.font takes tens or even hundreds of milliseconds to execute (as long as there are more complex HTML tags in the body). This causes a lag, and it becomes more noticeable if there are multiple ECharts instances on the page. Chrome gives a warning "Forced reflow while executing JavaScript took XXXms." However, if I delete the CSS or the large HTML tag, ctx.font will execute instantly. Additionally, if I set the tooltip's appendToBody to false, it also executes instantly. What's puzzling is that, in theory, canvas.font should not trigger a reflow.