Why moving elements with translate is better than with position: absolute top / left

There are two main ways to move an element around the screen:

• 2D 2D transform and translate() ;
• position:absolute and top/left change.

Chris Koyer recently wrote why it is better and more logical to use the translate (this is faster, and the position property has more to do with the layout, rather than with visual effects and animation, as opposed to translate ).

I want to expand his answer and give some good examples. I recorded a screencast in which using Chrome DevTools timline I look at the differences between these approaches in terms of performance, rendering and compositing features on the GPU.
')


If you need a shortened text version - continue to read.

Let's start with the examples that Chris gave:



These are quite correct examples, but they are so simple that both options look great. We will take something more complicated to load the browser properly, and then the difference will become much more noticeable (thanks to joshua for the macbook icon)



That's so much better. But first make a small digression.

Pixel snapping

The demo shows that the top edge of the MacBook looks clearer with the example of top/left (and the article seems to be saying that the translate better. Great!) This is due to the fact that absolute positioning is tied to pixel positions, and translate uses subpixels. interpolation.

One of the developers of the Chrome hardware acceleration subsystem, James Robinson, calls this the “dubstep effect,” because the elements seem to vibrate from low frequencies while driving. If you make the displacement along one of the axes small, just three pixels, the difference becomes very noticeable:



On the left, well visible jumps on the pixel grid. Perhaps in this example, this option looks better, although with a less contrast image this might not be so noticeable.

Back to performance

If you open the timeline in the Chrome developer tools, these two examples will look completely different:



The variant with top/left spends a lot of time drawing, and the movement is more jerky. The styles have large shadows, and the background is a complex gradient, and all this is calculated on the CPU. On the other hand, the translate draws a macbook on a separate layer, all two-dimensional or three-dimensional transformations are done on the GPU, which is much faster, and allows you to get a smoother motion.

Toward the end of the video, I dwell on these points in detail and show you how to measure the rendering time, see which areas are being redrawn, and when the GPU is used.

Demo

You can add more layers to make the effect more pronounced. Open the timeline and experiment:

Recommendations for animation

1. Use animations and CSS transitions when possible. The browser is very good at optimizing them.
2. If you need to animate via JavaScript, use requestAnimationFrame instead of setTimeout and setInterval .
3. Try not to change the styles of each frame (as it was done in jQuery animate() ), the animations set declaratively in CSS are much better optimized.
4. Using 2D transformations instead of absolute positioning usually provides a higher frame rate due to faster rendering.
5. Use the timeline to find and fix performance problems.
6. The Show Paint Rects and Render Composited Layer Borders options are useful when you need to know which areas are being redrawn.