KineticJS: animation performance in Firefox vs Chrome

Question

I'm running an animation using Kineticjs using the Animation module. Now I noticed there quite a big performance difference between Chrome and Firefox. Looking at the framerate I found the following results.

     Chrome    Firefox
avg:     50         50
min:     33         20
max:     56         75

As you can see, the variability of the framerate for FireFox is a lot bigger. The animation in Chrome is smooth (at least smooth enough), but the animation in Firefox is choppy every second or so, this happens when the framerate is very high or low.

Especially the high framerate spikes seem to ruin the appearance of a smooth animation.

Has anybody else experienced this behaviour? And is there a way to smooth the framerate out a bit more in Firefox?

Answer 1

This could be due to browser tab architecture differences, such as the fact that currently Google Chrome uses a separate process for each tab, so slow or bad code in one tab is far less able to affect code in another tab. With Firefox tabs are run in the same process, so slow code on one tab can affect other tabs.

This could also be due to browser performance differences, meaning the implementation of DOM and Javascript APIs that you are using.

is there a way to smooth the framerate out a bit more in Firefox?

You should try to find some causes for the difference in the framerate, process of elimination is probably the best path.

Try using the browsers with only one tab, and go through the list of apis used to see if there are performance differences for those.