Недавно я изучал улучшение анимации на своем веб-сайте - более конкретно, раскрытие навигации на мобильных устройствах.
В этой связи я наткнулся на следующий случай, о котором я надеюсь получить более глубокие знания.
Дело в том, что при переходе/анимации transform: translate3d()
кажется, что браузер требует больше вычислений, когда он применялся с использованием %
а не px
. Например, в моих тестах кажется, что переход из transform: translate3d(0, 500px, 0)
для transform: translate3d(0,0,0)
требует меньше вычислений и работает более плавно, чем переход из transform: translate3d(0, 100%, 0)
,
Обновление: после тестирования я обнаружил, что использование 100vh
/100vw
обходит /100vw
проблему использования процентов. Это может быть usefyk в случаях, когда элемент имеет известную процентную ширину окна или имеет полную ширину и тем самым улучшает производительность. На самом деле кажется, что использование этого значения ведет себя так, как если бы он был присвоен значением px
в Chrome.
Вот несколько фотографий временной шкалы из каждой анимации. Временные графики получены с помощью инструментов Google Dev в разделе "Производительность". Чтобы лучше показать разницу, производительность была ограничена в Chrome Dev Tools до "младшего мобильного" (6-кратное снижение производительности процессора).
Преобразование с использованием процентов:
Преобразование с использованием пикселя (px):
Как видно из изображений, кажется, что при рендеринге и рисовании происходит гораздо больше рендеринга и рисования при использовании %
а не px
чтобы определить преобразование. Имеет смысл, что браузеру приходится вычислять процентные значения для каждого кадра (я думаю?), Но я удивлен, что это занимает гораздо больше, по сравнению с использованием значения пикселя.
Также обратите внимание, что фреймворки на снимке, показывающие временную шкалу процента, никогда не достигают ~ 60 кадров в секунду, но довольно усредняют около 40 кадров в секунду.
Ниже приведены фрагменты для повторения дела. Там один использует процент и один, используя px.
$(document).on("click", function(){
$(".bb").toggleClass("active");
});
.aa{
height:50px;
background:blue;
position:fixed;
top:0;
width:100%;
}
.bb{
position:fixed;
top:0px;
background:none;
height:100%;
width:100%;
left:0;
transform:translateZ(0);
overflow:hidden;
pointer-events:none;
}
.cc{
height:100%;
transform:translate3d(0,500px,0);
width:100%;
transition:transform .5s ease-in;
background:red;
}
.bb.active .cc{
transform:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the document to start animation<p>
<div class="bb">
<div class="cc">
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul><ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li>
<li>Point seven</li>
</ul>
</div>
</div>