1

I found an interesting article about will-change property in CSS (which allows to tell the browser beforehand what will change and react proactively). The main reason behind this property is to improve the performance.

As far as I understood I can use it in the following way: jsFiddle (click on the square)

<div class="element"></div>

.element {
    width: 50px;
    height: 50px;
    margin:30px;
    background: red;
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotate(90deg);
}

So far so good, but in order to speak about improving in performance, there should be a way to measure this improvement.

So is there a way to measure performance, CPU/GPU utilization with and without will-change?

At the time of writing of this article, only Chrome Canary 36+, Opera Developer 23+, and Firefox Nightly support the will-change property. There is an intent to ship it to the stable channel too.

Salvador Dali
  • 214,103
  • 147
  • 703
  • 753

1 Answers1

0

This is the compactability as of today:: http://caniuse.com/#search=will-change

You can Enable the 1. FPS meter 2.Show paint rectangles

in rendering tab in google chrome console. The FPS rate won't decrease from 60 FPS if you are using will-change property. Also the show paint rectangle won't be shown.

Will-change property will be most effective if we add to fixed elements.(When scrolling)

anandharshan
  • 5,817
  • 4
  • 34
  • 33