0

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?

Mikhail Dudin
  • 459
  • 5
  • 15

1 Answers1

1

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.

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Sorry, but don't really understand what you mean by running the performance profile. Is it like connecting to my device using ADB or something? Or is there any kind of profiling techniques provided by konvajs itself? – Mikhail Dudin Apr 12 '21 at 19:23
  • @MikhailDudin Yes, you should connect your device and run the profile with available dev tools. There is no such information from Konva itself. – lavrton Apr 13 '21 at 16:35
  • Setting pixelRatio to 1 has boosted my app's performance dramatically! Gonna see if it still looks good on my iPad tomorrow, but anyway thanks for giving me the right direction – Mikhail Dudin Apr 13 '21 at 21:44