CSS page Rendering optimization properties Will-change

Previous words

When we use certain behavior (click, move or scroll) to trigger the page to draw large area, the browser is often unprepared, only passively using the CPU to calculate and redraw, because there is no prior preparation, to cope with the rendering is very tough, so dropped frame. The CSS property Will-change provides a way for web developers to tell the browser how the element will change, so that the browser can prepare for the optimization before the element's attributes really change. This optimization prepares a part of the complex computational work ahead of time, making the response to the page faster and more responsive. This article describes the CSS properties Will-change

Prepare knowledge

The GPU is a graphics processor that specializes in processing and drawing graphics-related hardware. The GPU is designed to perform complex mathematical and geometric calculations, freeing the CPU from graphics-processing tasks and performing additional system tasks

The so-called hardware acceleration, is in the computer to calculate a very large amount of work assigned to specialized hardware to deal with, reduce the workload of the CPU

CSS animations, transformations, and gradients do not automatically trigger GPU acceleration, but instead use a slightly slower browser software rendering engine. In the transition world of, and, you transform animation should unload the process to the GPU to speed up. Only the dimensional deformation will have its own layer, and the 2D deformation will not

"Hack"

Use translateZ() or translate3d() method to add an unchanged 3D distortion to the element, tricking the browser to trigger hardware acceleration. The price, however, is that this is the case by overlaying elements into its own layer, consuming RAM and GPU storage space, and unable to determine the space release time

Grammar

Will-change

Features: Advance notification of what the browser element will do, let the browser prepare the appropriate optimization settings in advance

Value: Auto |<animateable-feature>

Initial value: Auto

Applies to: all elements

Inheritance: None

Compatibility: ie13+, chrome49+, safari9.1+, ios9.3+, android52+

Auto means that no particular attribute is specified, and the browser needs to guess for itself, and then use some common methods that the browser often uses to optimize

  <animateable-feature>Can be the following values:

  scroll-positionIndicates that the developer wants to change the position of the scroll bar or animate it in the near future

  contentsIndicates that the developer wants to change something in the element's content or animate it in the near future

  <custom-ident>Indicates that the developer wants to change the specified property name or animate it in the near future. If the attribute name is shorthand, it represents all the shorthand or full-write attributes that correspond to it.

Use

"Using hover"

Do not write directly in the default state as follows, because Will-change will always hang:

. will-change {  will-change:transform;  Transition:transform 0.3s;}. Will-change:hover {  Transform:scale (1.5);}

The parent element can be hover, declare the will-change, so that the removal of the time will automatically remove, the scope of the trigger is basically the range of valid elements

. will-change-parent:hover. will-change {  will-change:transform;}. Will-change {  transition:transform 0.3s;}. Will-change:hover {  Transform:scale (1.5);}

"Using JavaScript Scripts"

. sidebar {  will-change:transform;}

The above example adds the Will-change property directly to the stylesheet, which causes the browser to keep the corresponding optimization work in memory, which is not necessary. Here's how to use the script to apply the will-change property correctly

var el = document.getElementById (' element '); Set the Will-change property to the element when the mouse moves over it el.addeventlistener (' MouseEnter ', Hintbrowser);//When the CSS animation is finished, clear the Will-change property El.addeventlistener (' Animationend ', removehint); function Hintbrowser () {  //Fill in the CSS property name that changed in the CSS animation  this.style.willChange = ' transform, opacity ';} function Removehint () {  this.style.willChange = ' auto ';}

"Direct use"

However, if an app turns pages when the keyboard is pressed, such as a photo album or slide show, its page is very large and complex, and it is appropriate to write will-change in the style sheet. This will allow the browser to prepare the transition animation in advance, when the keyboard is pressed to see the flexible animation

. slide {  will-change:transform;}

Precautions

1. Do not apply will-change to too many elements: the browser has tried to optimize anything that can be optimized. There are some more powerful optimizations that, if combined with will-change, can consume a lot of machine resources and, if overused, may cause the page to respond slowly or consume a lot of resources

2. Use sparingly: Typically, when an element reverts to its initial state, the browser discards the optimization work that was done before. However, if the Will-change property is explicitly declared directly in the style sheet, it means that the target element may change frequently, and the browser will save the optimization work longer than before. So the best practice is to switch the value of Will-change before and after the element changes through the script

3, do not apply Will-change optimization prematurely: If the page is not a problem in terms of performance, do not add the Will-change attribute to squeeze the slightest speed. Will-change is designed as a last-resort optimization to try to solve existing performance problems. It should not be used to prevent performance problems. Overuse of will-change can result in a lot of memory usage and lead to more complex rendering processes, as browsers try to prepare for possible changes. This can lead to more serious performance problems

4, give it enough work time: This property is used to let the page developer tell the browser which properties may change. The browser can then choose to do some optimization work ahead of time before the change occurs. So it is very important to give the browser a little time to really do the optimization work. When you use it, try to find some way to know what the element might be doing in advance, and then add the Will-change attribute to it.