Performance Overhead When Panning And Zooming
So im experiencing performance overhead when panning and zooming. I assume this is javascript's fault but i do need some way to optimise it because as of now its slow even with like 5 canvases opened
12 Replies
Have you looked in the profiler where the slowdown is?
You can also try putting the css "will-change: transform;" on your content-pannable element
well
i use tauri
and its the safari devtools which im not too familiar
also i can't get frames per second
actually i think its also on the canvas the overhead
also
here is the pixel art canvas component
ok so analysed the performance
paint is the problem, at 93%
i will probably need to run the canvas elements in the GPU
Making sure those elements are gpu composited should help
how do i make sure that they are?
The will-change css on the one whose transform is changing should handle that one, can also try adding transform: translate3d(0,0,0) on the five canvas roots
hmmm
will-change tho seems todo nothing
I sometimes had big performance boosts with Canvas API on chrome when disabling hardware acceleration
This can be done by setting the
willReadFrequently flag on the canvas to true
IIRC hardware acceleration is defaulted to be enabled w Canvas API and there is not really a proper way of disabling it (besides that willReadFrequently flag, but is only for chromium).
There is just something about the implementation w canvas on chromium that causes a lot of textures to be needed to be loaded to the GPU.oh