Specific use of CSS front-end page rendering optimization attribute will-change

Preface

When scroll events such as scroll and resize are triggered, the frequency of triggering is very high and the intervals are very close. If the event involves a lot of position calculations, DOM operations, element redrawing and other work, and these tasks cannot be completed before the next scroll event is triggered, it will cause the browser to drop frames (frame drops are, for example, flickering images and unsmooth movements). In addition, the user's mouse scrolling is often continuous, which will continuously trigger the scroll event, causing frame drops to expand and browser CPU usage to increase, affecting the user experience.

The CSS property will-change provides web developers with a way to inform the browser of changes that will occur to the element, so that the browser can make corresponding optimization preparations in advance before the element properties actually change. This optimization can prepare some complex calculation work in advance, making the page more responsive and sensitive.

Preparatory knowledge

CPU

CPU stands for central processing unit. Its main function is to interpret computer instructions and process data in computer software. It is also called the motherboard.

GPU

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

Hardware Acceleration

Hardware acceleration means that the Graphics Processing Unit (GPU) will assist the browser in rendering the page quickly by replacing the Central Processing Unit (CPU) to do some heavy tasks. When CSS operations use hardware acceleration, it usually speeds up page rendering.

The process of browser rendering page:

1. HTML Parser

2. Constructing the DOM Tree

3. Render Tree Construction

4. Painting the Render Tree

The simple explanation is: the browser obtains the HTML returned by the server through the request. Because HTML is a tree structure, the browser parses it to generate a DOM Tree. After the CSS is parsed, the simulated tree CSSOM Tree and DOM Tree are combined to construct the Render Tree, which is finally used for painting.

CSS animations, transformations, and gradients do not automatically trigger GPU acceleration, but instead use the browser's slightly slower software rendering engine. In the world of transitions, transforms, and animations, it is appropriate to offload the process to the GPU to speed things up. Only 3D transformations have their own layer, while 2D transformations do not.

will-change

1. What is will-change?

The function of will-change is to notify the browser in advance what animation the element will do, so that the browser can prepare appropriate optimization settings in advance

The official documentation says: This is a feature that is still in the experimental stage, so the functionality and behavior of this syntax may change in future versions of browsers.

CSS3 will-change is a web standard attribute, and Chrome/FireFox/Opera all support it in terms of compatibility.

Note: will-change will tell the browser "I'm going to trigger it" before the actual behavior is triggered. This means that instead of forcing us to switch to the GPU with a 3D transform, we can now use a dedicated property to inform the browser to watch out for upcoming changes, thereby optimizing and allocating memory. Make an appointment in advance and take your time.

2. Grammar

will-change: auto
will-change: scroll-position
will-change: contents
will-change: transform // Example of <custom-ident> 
will-change: opacity // Example of <custom-ident>
will-change: left, top // Example of two <animateable-feature>

will-change: unset
will-change: initial
will-change: inherit

auto

It means that there is no specific specification of which properties will change, and the browser needs to guess and then use some common methods commonly used by browsers to optimize.

The possible values ​​are:

scroll-position

Indicates that the developer hopes to change the position of the scroll bar or animate it in the near future

contents

Indicates that the developer wants to change something in the element's content in the near future, or animate them

Indicates that the developer hopes to change or animate the specified property name in the near future. If the attribute name is an abbreviation, it represents all the corresponding abbreviations or full attributes.

Use of will-change

Use hover

Don't write directly in the default state, because will-change will always mount

.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 is hovered, so that it will be automatically removed when it is moved out, and the triggered range 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);
}

JS usage

var el = document.getElementById('element');

// When the mouse moves over the element, set the will-change attribute to the element el.addEventListener('mouseenter', hintBrowser);
// Clear the will-change property when the CSS animation ends el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // Fill in the CSS property names that you know will change in CSS animation this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

If an application turns pages when the keyboard is pressed, such as an album or a slideshow, and its pages are large and complex, it is appropriate to write will-change in the style sheet. This will allow the browser to prepare the transition in advance, so that you can see the slick and snappy animation immediately when the keyboard is pressed.

.slide {
  will-change: transform;
}

Notes on using will-change

Don't apply will-change to too many elements:

Browsers already try their best to optimize everything they can. Some of the more powerful optimizations, if combined with will-change, may consume a lot of machine resources. If overused, it may cause the page to respond slowly or consume a lot of resources.

Use sparingly:

Normally, when an element is restored to its original state, the browser will discard any optimization work that was done previously. But if you explicitly declare the will-change property directly in the style sheet, indicating that the target element may change frequently, the browser will save the optimization work longer than before. So the best practice is to toggle the value of will-change via script before and after the element changes.

Don't apply will-change optimization too early:

If your page has no performance issues, don't add the will-change attribute to squeeze out a little extra speed. will-change was designed to be a last resort optimization to try to fix existing performance issues. It should not be used to prevent performance problems. Overuse of will-change This can result in a large memory footprint and a more complex rendering process as the browser tries to prepare for possible changes. This can lead to more serious performance issues.

Give it enough time to work:

This attribute is used by page developers to inform browsers which properties 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 way to know the possible changes of the element a certain time in advance, and then add the will-change attribute to it.

This is the end of this article about the specific use of the CSS front-end page rendering optimization attribute will-change. For more related CSS will-change content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future.