Как измерить прирост производительности от использования свойства will-change

Question

Я нашел интересную статью о will-change свойство в CSS (которое позволяет заранее сообщить браузеру, что изменится и проактивно отреагирует). Основной причиной этого свойства является повышение производительности.

Насколько я понял, я могу использовать его следующим образом: jsFiddle (нажмите на квадрат)

<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);
}

Пока все хорошо, но чтобы говорить об улучшении производительности, должен быть способ измерить это улучшение.

Так есть ли способ измерить производительность, загрузку CPU/GPU с и без will-change?

На момент написания этой статьи только свойство Chrome Canary 36+, Opera Developer 23+ и Firefox Nightly поддерживают свойство will-change. Также есть намерение отправить его на стабильный канал.

Answer 1

Это компактность на сегодняшний день:: http://caniuse.com/

Вы можете включить 1. FPS метр 2. Показать прямоугольники

во вкладке рендеринга в консоли Google Chrome. Скорость FPS не уменьшится с 60 FPS, если вы используете свойство will-change. Также прямоугольник показа краски не будет показан.

Свойство Will-change будет наиболее эффективным, если мы добавим фиксированные элементы.(При прокрутке)