The first thing you want to advise after viewing your links, it will learn to use the profiler in the browser with the help of which you can find leaks, bottlenecks, as well as it shows fps. Personally, I do not like chrom's profiling tools, but I use, in my opinion the best, IE. It is also necessary to note that it is necessary to check separately in firefox, since it has problems with canvas and it cuts its capabilities almost twice.
And now about your problem. Horse racing fps is a completely normal and mundane story. But you are confused by the jerky animation. This ailment was always and it is treated only by smoothing the time delta. That is, you need to build all the animation in the game not on the timer “ticks”, but on the past tense. But the past tense does not help as long as it is not smoothed. What does this mean. Imagine that you are creating a motion animation of a square from left to right for a distance of 100px per second with the browser update set at 60fps per second. What are you doing for this? You take and divide the distance 100px by 60sec, which is 1.6. With good fps, a call to the render update function is called 60 times per second and multiplying the elapsed time by a predetermined value (1.6), the movement will look smooth. But if fps falls, then the intervals increase and thus the objects start jumping, since with ten updates they are removed by ten equal segments of 1.6, and with a jump of fps, this value also increases. Therefore, there is only one way out - to create a time smoothing function and build the whole animation for this time.
And if you don’t understand what I was trying to convey, search Google for articles, since this topic is not one big article.
