CODEWITHSUNDEEP
htmlperformancemobilehtml5-canvaskineticjs
irie
irie

Reputation: 472

What are the best ways to boost KineticJS Performance, especially on mobile devices?

as I had some serious performance issues with my mobile web-application, I wanted to provide my solution and ask for further tips & tricks to keep the performance of KineticJS up, especially on mobile devices...

In my case, on desktop-browser everything seemed fine, but the application crashed mobile devices and their browsers. After a while, I found out, that the height and width of the browser (or better: the viewport) was much higher than the original device resolution. To fix this issue I simply added the following line in my index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

So I would be very glad to hear, if anyone of you has found some other ways keep performance up, or if there are any special performance-killers to avoid when using KineticJS.

Upvotes: 3

Views: 506

Answers (1)

Yushell
Yushell

Reputation: 745

I've also just begun using KineticJS, but have been using it heavily because we're building a canvas web app at work. The things I've found out that impact performance are:

The more shapes you draw on a layer, the slower everything is.

The more tweens / animations you apply, the slower everything is.

These things are pretty obvious, so I'll explain in little more detail what we've done to combat this.

If you're going to draw 10,000 shapes, drawing them on 1 layer is slower that drawing 10 layers and adding 1,000 shapes per layer. But drawing 20 layers and adding 500 shapes per layer is slower than the last.

Somehow, you have to try different approaches and see which one impacts less.

One other thing. Avoid manipulating unnecessary objects. For example, if you have 10 Groups, and each have 100 shapes. Only one group at a time is visible and you'll apply a tween on the group; instead of being lazy and applying a tween for all groups, put some work into it and just apply the tween on that one visible group.

Shape caching is also encouraged.

Beyond these things I have no other ideas. I’m currently dealing with all this. It’s pretty new to me. But I saw that no one had made any comments so I wanted to put my 2 cents in the pool.

Upvotes: 3

Related Questions