“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Recently, I made a demand for the overall skin change in the project. I found that after the color change, the background color and text color of elEME components were always slower than the change of conventional elements. How could I, a veteran obsessive-compulsive patient, tolerate this? You might as well come to Kangkang:

Eleme uses a lot of transition to handle component styles. And it’s transition: all.3s; Let’s take a look:

So the question is: Why does Elder-UI use transition so much to style elements? What good will come of this? Today we’re going to find out.

Rearrangement and redrawing

Let’s start with the browser rearrangement and redraw mechanism.

• Updated element geometry (rearranged)

If you modify the geometry of an element using JavaScript or CSS, such as changing its width, height, etc., the browser will trigger a rearrangement, a series of sub-stages after parsing, called rearrangement. Of course, reordering requires updating the entire rendering pipeline, so it’s also the most expensive.

• Update the draw attribute of an element (redraw)

If you change the background color of an element, the layout phase will not be performed, because there is no change in geometry, so you go directly to the draw phase, and then perform a series of subsequent subphases, called redraw. Redraw eliminates layout and layering, so it is more efficient than rearrange.

Obviously, both rearrangement and redrawing have certain performance overhead. High-frequency operations like hover are very sensitive to performance. For better user experience, is there a better solution to avoid the performance overhead of the main thread? And the answer is transition.

CSS transform or Transition to animate, which avoids rearranging and redrawing phases and executes compositing directly on non-main threads. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency.

Yes, Eleme uses Transition for background colors, borders, and colors, for positioning buttons, and for centering elements. , I use a lot of Transition to achieve a smoother visual experience. Of course, there are side effects in my current skin change solution, but the flaws are not enough.

GPU acceleration

Css3 has hardware acceleration enabled by default, so the TRANSITION and Transform of CSS can be drawn by Gpu to achieve smoother display optimization.

To sum up: Do you see why Elder-UI uses transition a lot to style elements?

supplement

For more information on whether the Transform has hardware acceleration, check out this guy’s blog

The difference between 3D and 2D Transform is that the browser creates a separate composite layer for the 3D animation before rendering the page, while it creates a composite layer for the 2D animation during runtime.

At the beginning of the animation, a new composite layer is generated and loaded into the GPU’s texture to initialize the Repaint, then the GPU’s compositer controls the execution of the entire animation, and finally when the animation ends, the repaint operation is performed again to remove the composite layer.

My personal point of view, you are welcome to criticize. Leave a comment in the comments section.