CSS Will-change Properties

Introduced

If you notice the performance of "flicker" some CSS operations (especially transformations and animations) on WebKit's browser, you probably noticed it before 硬件加速 .

CPU, GPU, and hardware acceleration

硬件加速means that the Graphics processing unit(GPU) will help the browser render the page quickly by replacing the central processing Unit (CPU) with something that is relatively heavy load. When a CSS operation uses hardware acceleration, it usually makes the page render faster

As the name implies, both the CPU and GPU are computer processing units. CPU in the computer motherboard, almost all operations of computer processing, there is a computer brain, the GPU on the video card, responsible for processing and rendering graphics. In addition, the GPU is designed to excel in the mathematical and geometric operations required to render graphics. So passing on the operation to the GPU can achieve significant performance gains while reducing the contention for mobile device CPUs.

Hardware acceleration (or GPU acceleration) relies on the browser rendering page used layering model when a particular action (CSS 3D morphing) acts on an element on the page, the element moves to its own layer , and the element in this layer is not independently rendered by interference from other elements of the page, Then compound into the page. In the way that isolated content rendering works, if the page changes only the deformation of the element, the rest does not have to be re-rendered, which leads to a significant speed advantage. It is noteworthy that only the deformation of the layer,2d will have its own deformation will not.

CSS animations, transformations, and gradients do not automatically trigger GPU acceleration, but instead use a slightly slower browser software rendering engine. However, some browsers offer hardware acceleration by means of certain properties for higher rendering performance. For example, a opacity property is one of several properties that can be accelerated because the GPU can handle it conveniently. Basically any layer of transparency gradient browser will be given to GPU processing to speed up. In addition to what opacity can do with GPUs, CSS 3D is distorted.

Translatez () (or Translate3d ()) Hack

For a long time, we all passed translateZ() or translate3d() hack to cheat the browser to trigger hardware acceleration by adding unchanged 3D variants for elements, such as elements in 2-dimensional space can be hardware accelerated by adding the following CSS

transform: translate3d(0, 0, 0);

The so-called hardware acceleration is the creation of a layer that is passed to the GPU processing, but forcing the use of hack way to create layers is not a permanent one, creating layer technology can make the page acceleration, But there are also costs: they take up RAM and GPU storage (considering the limited storage capacity of mobile devices), so be careful to use them and make sure that this is really helpful for page rendering

To avoid creating a layer of hacks, a CSS property that allows us to inform the browser in advance what changes we will make to the element is introduced so that the browser can optimize the way the elements are rendered, preparing expensive animation operations for elements in advance, which is the wiil-change property

The Will-change property

The Will-change property can inform the browser in advance what we want to animate the elements so that the browser can prepare the appropriate optimization settings in advance. This avoids costly costs that can have a significant impact on page responsiveness. Elements can be changed more quickly, rendering faster, so that the page can be quickly updated, more smooth performance.

For example, when you use CSS 3D transformations for a element, the elements and their contents can be created before the page is composited to the layer we said before. However, placing elements in layers is an expensive operation, which will cause the warp animation to delay the instant of a courseware, i.e.flicker

To avoid this delay, we can notify the browser before it happens, so the browser will have time to prepare for these changes, and when it happens, the layer is ready, so that the animation cocktail is smooth, not splash screen

Use Will-change to prompt the browser about the impending transformation is very simple, add a CSS property on the line

will-change: transform;

You can also tell the browser to change the scrollbar position of the element, or multiple properties to be changed, write down the name of the property, or you can write multiple, comma-separated

will-change: transform, opacity;

Declaring that an element is about to change will make the browser make a better decision when rendering the page, which is significantly better than the 3D hacks previously said.

Reasonable use

Understand the behavior of Will-change, is it more efficient to set will-change for all elements in the browser? The answer is no, will-change if abused will cause the page to crash.

Will-change also has side effects, although not directly visible, after all it is just behind the browser and whispering, in order to use will-change rationally, give some small advice

Do not declare too many attributes or declare for too many elements

*,*::before,*::after {    will-change: all;}

Although it looks very good, but in fact, the page rendering damage is very large, so the rule set and no difference, the browser will try to optimize the rendering of all elements, it is equal to you let the teacher focus on the class to take care of every classmate, is nonsense!

In fact, this is even harmful, because some operations will take up too much resources, and even cause the page to collapse, it is tantamount to forcing the teacher for each student, exhausted ...

Give the browser enough time to work

Will-change, as the name implies, notifies the browser of impending changes, rather than the changes that are taking place. Using Will-change, we ask the browser to focus on the elements we declare, in order for the browser to have a certain amount of time to organize the optimization operation, so that when the change occurs, the optimization can not delay the effect of the element

Adding Will-change to an element immediately before it changes has little effect and may not be as good as setting it, because it causes the new layer to be created

.element:hover {    will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5);}

This setting is useless, we need to give the browser enough time, this is useful, feel the

.element {    /* style rules */    transition: transform 1s ease-out;}.element:hover { will-change: transform;}.element:active { transform: rotateY(180deg);}

If you must hover, there are tricks.

.element {    transition: opacity .3s linear;}/* declare changes on the element when the mouse enters / hovers its ancestor */.ancestor:hover .element { will-change: opacity;}/* apply change when element is hovered */.element:hover { opacity: .5;}

In fact, the core idea is to let the browser have time to prepare

Remove Will-change after change is complete

For general optimization, when the change is complete, the browser will undo the optimization, restore the normal mode, but if the use of will-change will cause the optimization delay release, which requires us to release

That's when we need JavaScript.

Rough Generic ExampleGet the element, which is going to being animated on Click, for examplevar el = document.getelementbyid (//Set Will-change when the element is Hoveredel.addeventlistener ( MouseEnter ', hintbrowser); El.addeventlistener (function hintbrowser () {// The optimizable properties that is going to change //in the animation ' s keyframes block this.style.willchange =  ' transform, opacity ';} function removehint () { span class= "keyword" >this.style.willchange =       

Of course, the actions that the user triggers repeatedly are not removed in the style and can be

The value of the Will-change property

1. Auto indicates no explicit intent; Both heuristic and optimization, the user agent should be applied in the same way as normal
2. Scroll-position that developers expect to change or have animated application elements in the scrolling position
3. Contents says developers are expected to change or have animated application elements in the next

4. Used to exclude keywords will-change, none, all, auto, scroll-position, and contents, add some common keywords from outside

   Will-change:transform:
   Will-change:opacity:
   Will-change:top, left, bottom, right:

If an attribute has no initial value, on this element this property will create a stack of contents, explicitly stipulating that the Will-change property must create a stack of content on this element.

If an attribute has no initial value, this property causes the element to produce a fixed-positioned element containing the block, which explicitly specifies that the Will-change attribute must cause this element to produce a fixed-position element that contains a chunk

Browser compatibility

This is not optimistic at the moment, I believe it will be good

Image

Conclusion

Will-change can help us get rid of hack hardware acceleration, but the greater the capacity, the greater the responsibility

Tab Atkins Jr

Set Will-change to the properties you'll actually change and on the elements is actually changing. and remove it when they stop.

Translation: http://selayou9527.github.io/2014/11/07/CSS%20will-change%20%E5%B1%9E%E6%80%A7/

Original: CSS Will-change properties

CSS Will-change Properties