CSS will-change property: when to use?

Question

CSS will-change property: when to use?

Navigation

#1 by (11 votes)

15

According to the W3C specification , the will-change property is intended to inform to the browser which are the CSS properties that will be modified so that it can make optimizations about 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 by setting the opacity property, telling the browser that such property may change soon and then it can make optimizations on the modified element.

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

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

css

asked by anonymous 13.06.2017 / 17:01

1 answer

Differences between getClass (), getResourceAsStream () and getClass (). getClassLoader (). getResourceAsStream () Why use / not use * box-sizing?

score 11 · Accepted Answer

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 the will-change property work?

To use the CSS property will-change , we must state as its value the name of the property that is expected to have an animation or change. The 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 intent; the user agent should apply any optimization as it normally does.

O can be one of the following values:

scroll-position

Indicates that the author expects an animation or change in the scroll position of the element in the future.

contents

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

<custom-ident>

Indicates that the author expects an animation or property change with the name given to the element in the future. This can not 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 it is common for transform to be a composition layer. The Chrome currently takes two actions , given the particular properties of CSS: establishes a new composition layer or a new < a href="https://developer.mozilla.org/en/docs/Glossary/stacking_context"> stacking context .

Example:

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

In the example above when hovering over the element with the slide class, the browser will perform optimizations because the code author indicated that a property change will follow opacity .

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

Browser optimizations through the will-change property are all performance-focused. They can increase the responsiveness of a page by doing the potentially expensive work ahead of time when it will actually be needed. Translating, the browser leaves "preloaded", the heavy work it would do, at the time of changing a CSS property, waiting only the moment to display them. This way you can gain processing speed.

Here's a caveat. Using this property can be tricky! The browser already tries to optimize everything, so you should not apply will-change to many elements. When used in excess it can slow page load in some cases or consume a lot of resources. Here's an example of a bad use of will-change :

.separador {
  will-change: transform;
}

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

When is the use of this property necessary?

Since the purpose of the will-change property is performance gain, use of it must be done when the response time of a page is not satisfactory due to rendering problems.

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

Conclusion

For clarity, use will-change only if you already have a performance problem on your hands, otherwise you might end up with one.