CSS page rendering optimization property will-change

Previous words

 When we trigger the page to draw a large area through certain behaviors (click, move or scroll), the browser is often unprepared and can only passively use the CPU to calculate and re-draw the page. Drawing, because there was no preparation in advance, it was difficult to deal with rendering, so the frame dropped and stuck. The CSS attribute will-change provides web developers with a way to tell the browser what changes will occur to the element, so that the browser can make corresponding optimization preparations in advance before the element attributes actually change. This kind of optimization can prepare part of the complex calculation work in advance, making the page response faster and more sensitive. This article will introduce the CSS property will-change

Preparatory knowledge

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

 The so-called hardware acceleration means computing in the computer A very large amount of work is allocated to specialized hardware for processing, reducing the workload of the CPU

  CSS animations, transformations, and gradients do not automatically trigger GPU acceleration, but use the browser's slightly slower software rendering engine . In the world of transition, transform and animation, the process should be offloaded to the GPU to speed things up. Only 3D deformation will have its own layer, while 2D deformation will not.

【Hack】

Use translateZ() or translate3d() The method adds an unchanged 3D deformation to the element and tricks the browser into triggering hardware acceleration. However, the cost is that this situation takes up RAM and GPU storage space by overlaying elements to its own layer, and the space release time cannot be determined

Syntax

will-change

 Function: Notify the browser in advance of what animation the element will do, allowing the browser to prepare appropriate optimization settings in advance

 Value: auto | &lt ;animateable-feature>

Initial value: auto

Applies to: all elements

Inheritance: None

Compatibility: IE13+, chrome49+, safari9.1+, IOS9.3+, Android52+

  auto means that there is no specific specification of which attributes will change. The browser needs to guess by itself, and then use some conventional methods commonly used by browsers to optimize

  <animateable-feature></animateable-feature> can be the following values: animate

÷ contents Indicates that the developer wants to change something in the content of the element in the near future, or animate them

÷ <custom-ident> indicates that the developer hopes to change the specified property name or animate it in the near future. If the attribute name is an abbreviation, it represents all the corresponding abbreviations or full-length attributes</custom-ident>

Use

【Use hover】

Don’t be like Write the following directly in the default state, because will-change will always be hanging:

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

You can declare will-change when the parent element hovers, so that it will automatically remove when it is moved out, which is triggered. The scope is basically the valid element range

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

[Use javascript script]

.sidebar {
  will-change: transform;
}

 The above example directly adds the will-change attribute to the style sheet, which will cause the browser to continue the corresponding optimization work. Saved in memory, this is actually unnecessary. The following shows how to use a script to correctly apply the

will-change

attribute

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填写在CSS动画中发生改变的CSS属性名
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

[Direct use] However, if an application turns pages when the keyboard is pressed , such as photo albums or slideshows, the pages are large and complex. At this time, it is appropriate to write will-change in the style sheet. This will make the browser prepare the transition animation in advance, and you can see the flexible and brisk animation when the keyboard is pressed

.slide {
  will-change: transform;
}

Notes

1. Don’t Applying will-change to too many elements: The browser is already trying to optimize everything it can. There are some more powerful optimizations that, if combined with will-change, may consume a lot of machine resources. If used excessively, it may cause the page to respond slowly or consume a lot of resources.

  2. There are Use sparingly: Typically, browsers discard optimization work when an element is restored to its original state. However, if the will-change attribute 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 through script before and after the element changes

  3. Don’t apply will-change optimization prematurely: If the page has no performance problems, don’t add the will-change attribute to squeeze out a little bit of speed. The original design intention of will-change is as a last resort optimization method to try to solve existing performance problems. It should not be used to prevent performance problems. Excessive use of will-change can lead to large memory usage and a more complex rendering process as the browser attempts to prepare for possible changes. This will lead to more serious performance problems

 4. Give it enough working time: This attribute is used to allow page developers to inform the browser which attributes may change. The browser can then choose to do some optimization work in advance before the change occurs. So it's very important to give the browser some time to actually do these optimizations. When using it, you need to try to find some ways to know the possible changes of the element at a certain time in advance, and then add the will-change attribute to it

For more CSS page rendering optimization attributes will-change, please pay attention to the PHP Chinese website for related articles !