I am running an angular application with a Konva stage with some moving shapes and images. I noticed when the browser goes out of focus and back in focus the whole stage freezes and the CPU of the performance monitor in chrome dev tools goes to 100% for a few seconds. Profiler showed that roughly 580 ms is Image decode (Painting) and about 1000ms is System.
However when the browser stays out of focus the performance monitor shows no significant change as when it remains in focus and the shapes move smoothly.
Does anyone know what could cause this performance lag when tabbing back into the window? My first thought was that it might be the canvas or something internally in Konva starts to update again that was paused while the browser was out of focus...
Maybe you can check HTML5 Canvas All Konva performance tips list.
Optimise stage size - following the rule of ‘draw as little as possible’, try to avoid creating a large stage because moving all those bytes from memory to screen is going to have a negative impact. There are some tips here that offer alternative approaches to the mega-stage problem!
Set a viewport on mobile - Scaling images is a significant performance hit, so for mobile applications set viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">which will avoid unnecessary scaling of your Konva output.
Use
Konva.pixelRatio = 1on retina devices - Konva automatically handles pixel ratio adjustments in order to render crisp drawings on all devices. But, just in case you have bad performance on retina devices, setKonva.pixelRatio = 1to reduce the scaling work Konva has to do. This setting might affect the output in some cases, so make sure that quality of the result is ok for you.