Вводная информация: я сделал фиксированную кнопку меню, чтобы отображать меню навигации при использовании мобильного устройства. Для этого приложения я использую сценарий Headroom.js, чтобы уменьшить размер кнопки при прокрутке вниз, чтобы она не блокировала слишком много содержимого. Анимация/переход применяется путем добавления класса с заданными изменениями.
В исходном методе я изменил размер и внешний вид кнопки, изменив height/width родительского элемента и padding дочернего элемента с помощью CSS (и перехода css).
Новый метод, который, как я читал, может/должен быть лучше на разных сайтах, заключается в изменении размера кнопки с помощью transform: scale(). Обратите внимание, что я также немного перемещаю элемент, также применяя translate3d(20px,20px,0) в этом методе. Тем не менее, он чувствует себя немного более плавным при прокрутке с использованием метода transform: scale() (хотя это может быть эффект плацебо), но использование временной шкалы инструментов chrome dev дает мне, казалось бы, неубедительные результаты.
Поэтому часть моего вопроса также заключается в том, как я должен оценивать лучший метод. Является ли временная шкала в инструментах Chrome Dev лучшим вариантом или есть лучший способ сделать это? И на каких элементах временной шкалы мне следует основывать свой выбор? и еще один вопрос, основанный на вашей интерпретации изображений и/или тестов в сочетании с вашими знаниями, какой метод работает лучше всего (или должен работать лучше всего в теории)?
Ниже вы можете увидеть два примера временной шкалы для каждого метода. Изменение высоты/ширины и заполнения (исходный метод): 
Метод с использованием transform: scale() для изменения размера: 
Также вы можете попробовать разные методы в скриптах здесь:
ссылка: Исходный метод изменения высоты/ширины и заполнения
ссылка на новый метод: с использованием transform:scale
Пожалуйста, не обращайте внимания на плохое расположение всего; особенно кнопка. Уродливое изображение внутри кнопки меню просто для того, чтобы показать, что изображение включено в макет на моей собственной странице, и принять это во внимание с точки зрения производительности. Изображения сзади также включены, так как это интернет-магазин с большим количеством изображений, которые могут повлиять на производительность.
CSS для добавленного класса, который вносит изменения в исходный метод:
.mobile-nav.headroom--unpinned {
height: 40px;
width: 40px;
}
.headroom--unpinned .mobile-content{
padding-top:4px;
}
CSS для добавленного класса с использованием transform:scale():
.mobile-nav.headroom--unpinned {
transform:scale(.5) translate3d(20px,20px,0);
}
Итак, резюмируя мои вопросы:
Как мне оценить, какие методы имеют наилучшую производительность, и какой метод, по вашему мнению, работает лучше всего?
Последнее замечание: я знаю, что методы разные (анимация разных вещей и большего количества элементов в исходном методе), но это 2 варианта, которые я предпочитаю на данный момент.
