I teach JS. I tried to write my Parallax plugin. Compared its CPU load with Parallax.js in Chrome Task Manager. My was at times harder. Below I will describe the logic of which was guided. As it should be, I could not understand.
Question two: Why such a difference? And how should it be?

There is an array with objects that need to be moved. Each mouse movement calculates a new position for each object (via for(){} ) and sends it to the drawing via:
requestId = requestAnimationFrame(animate)

The animate function runs through a separate array with new coordinates.
(via for(){} ) and draws motion.
Each new request for drawing is accompanied by the cancellation of the previous one:
cancelAnimationFrame(requestId)

Look at the function in work here (2.3Mb)

  • Usually, in all scroll and dispatch handlers, events are buffered. That is, for some time they accumulate events, and then they work out at once. I wrote something similar in my answer about the “jerky” scrolling: ru.stackoverflow.com/a/622563/220220 You don't seem to have buffering of events. I believe that this is the reason for the heavy load on the processor. - KAGG Design

1 answer 1

As far as I looked, you change the position of elements by changing the values, left and top.

When you change a set of values ​​for six CSS properties: margin, padding, top, left, bottom, or right, the browser performs additional calculations on how it appears on the layout of the entire page. Therefore, to increase the performance of animation is better to use:

 .foo { transform: translate3d(x, y, z); }

The reason transform is more productive is that it does not affect any other elements. Any actions that you perform apply to only one element, and the browser does not need to rebuild the entire window. It modifies only the part of the screen that contains the moving content.

Also, when converting an element using translate3d, it is processed through the GPU in Webkit browsers such as Chrome and Safari (which are installed on the iPhone and iPad), in Internet Explorer 9/10, and also in recent versions of Firefox.

Therefore, when using translate3d, you get the benefits of local screen adjustment. But besides this, you get additional benefits, since all the work is done by the GPU.

  • Thanks, I think it will help. Parallax.js uses just translate3d, but I didn’t think it could affect performance so much. Sadly, there will be almost no difference. - serken