Will-change CSS property: when to use?

Question

According to the W3C specification, the property will-change is intended to inform the browser which CSS properties will be modified so that it can perform optimizations on the elements in question. For example, if I want to change the opacity of a link, I can do the following:

.element { transition: opacity .2s; opacity: 1; }
.element:hover { will-change: opacity; }
.element:active { opacity: .3; }

<a href="#" class="element">Stack Overflow em Português</a>
<br>
<sub>Pressione o link acima para ver o efeito em ação</sub>

That is, when the mouse is over the element, I add the property will-change defining the property opacity, informing the browser that such property may change soon and then it can perform optimizations on the modified element.

The point is that the specification itself describes the use of this property as delicate and I’ve never particularly seen anywhere using it, so I ask:

• How the property works will-change?
• What kind of optimization can the browser do when the property is used?
• When use of this property is required?

Answer 1

Initial Considerations

The CSS property will-change, was created with the main intention of enabling browsers to perform optimizations in advance, before the element is effectively modified.

---

How will-change property works?

To use the CSS property will-change, we should inform as its value the name of the property that is expected to be an animation or change. Values can be:

/* Valores chave */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Exemplo de <custom-ident> */
will-change: opacity;          /* Exemplo de <custom-ident> */
will-change: left, top;        /* Exemplo de dois <animateable-feature> */

/* Valores globais */
will-change: inherit;
will-change: initial;
will-change: unset;

auto

This keyword does not express any particular intention; the user agent must apply any optimization as normally occurs.

may be one of the following values::

scroll-position

Indicates that the author expects there to be an animation or change in the element scroll position in the future.

contents

Indicates that the author expects there to be an animation or change in the content of the element in the future.

<custom-ident>

Indicates that the author expects there to be an animation or change in the property with the name given in the element in the future. This cannot be one of the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents. The specification does not define the behavior of a particular value, but is common pro transform be a layer of composition. The Chrome currently takes two shares, given the particular properties of CSS: establishes a new composition layer or a new Stacking context.

Example:

.slide:hover { 
    will-change: opacity;
}

In the example above by hovering the mouse over the element with the class slide, the browser will perform optimizations, because the code author indicated that the following changes will occur in the opacity property.

---

What kind of optimization can the browser do when the property is used?

The optimizations performed by browsers through the property will-change They’re all focused on performance. They can increase the responsiveness of a page by doing potentially expensive work before the time they really are needed. Translating, the browser leaves "preloaded", the heavy work it would do, at the time of changing a CSS property, waiting only for the time to display them. Thus it is possible to gain processing speed.

It is worth making a reservation here. Using this property can be tricky! The browser already tries to optimize everything, so you should not apply will-change in many elements. When used in excess may delay page loading in some cases or consume a large amount of resources. Let’s take an example of bad use of will-change:

.separador {
  will-change: transform;
}

In this case any element in which the class separator is applied, immediately the browser will understand that the property indicated in will-change will be changed soon, which will cause the browser to maintain the optimization in memory for much longer than necessary. By keeping in memory we understand that, the browser prepares the optimizations and stores them at runtime in memory, in order to wait for the right moment to display them.

---

When use of this property is required?

Bearing in mind that the purpose of the property will-change is performance gain, the use of it should be done when the response time of a page is not satisfactory, due to rendering problems.

Gets the key tip: If your page is performing well, do not add the property will-change in the elements just to bring more speed. will-change is understood as something to be used as a last resort, with the intention of trying to solve performance problems. It should not be used to anticipate these possible problems. Excessive use of will-change may result in excessive memory usage and cause a more complex rendering while the browser attempts to prepare for a possible change. This will lead to worse performance.

---

Completion

To be clear, use will-change only if you already have a performance problem on your hands, otherwise you may end up getting a.