Low FPS in Google Chrome on page redraw?

Question

JavaScript

Hello, please see an example .
The essence of the task is to move the layers when moving the mouse. And everything would be fine if not for the terribly low FPS in Chrome.

Comparison:
Chrome 24: 20-25 fps !!!
Firefox 18: 95-110 fps
Opera 12: 70-90 fps
IE 10: 100-120 fps

Why is this? What am I doing wrong?


I found in Crome Dev Tools, in the Timeline panel, that the Paint and Composite layers actions take 6-9 ms each. How to speed it up? Isn't chrome really such a brake?


I tried to do it through CSS translate, as in this article . But nothing has changed, perhaps for such healthy layers this approach does not work.

Answer 1

1. mousemove - here you only need to determine the position value, and you need to update it in requestAnimationFrame. A kind of "delayed positioning". In chrome, mousemove can be called too often - and because of this, redraw lags.
2. translate - better than translate3d(X,Y,'0px')

Answer 2

www.youtube.com/watch?v=nxXkquTPng8 good talk on this subject.

Answer 3

Thanks, I'm still reading about requestAnimationFrame, but the second option helped. FPS in Chrome immediately jumped to 60 (apparently there is no higher there)