Search code examples
javascriptandroidcanvaskonvajskonva

Konva animation and drag'n'drop are super slow on my Xiaomi device


I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.

The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.

What is it that might cause the issue?


Solution

  • First, you should run the performance profile on your phone and take a look at what exactly is slow. Konva code execution? Native 2d canvas rendering? Browser layout work?

    Also try to experiment with Konva.pixelRatio property https://konvajs.org/docs/performance/All_Performance_Tips.html.

    Konva.pixelRatio = 1;
    

    The image may be blurry on HPDI device, but probably it will be good enough. Probably default pixel ratio is too high. You can try different values like 1 or 1.5.