#javascript #html #css
От чего зависит плавность сайтов? Имею в виду разные эфекты появления меню, слайдеры,
скроллы и тп.
Сделал меню, на пк проверяю все нормально, плавно, красиво. Но, когда дело доходит
до проверки на моб. устройствах мне становится стыдно. Все рывками, дергается, непонятно
как смещается и тп. Даже обычный скролл тупит.
Подскажите, как правильно делать плавную верстку, от чего это зависит(css свойства
и тп), какие есть подводные камни?
P.S. Пример моего меню
$('.trigger-menu').on('click', function () {
$('body').toggleClass('menu-open');
});
$('.bg').on('click', function () {
$("#mobile-menu-trigger:checked,.menu-inner-trigger:checked").prop("checked",
false).change();
$('body').toggleClass('menu-open');
});
ul,
li {
list-style: none;
margin: 0;
padding: 0; }
.container {
width: 500px;
height: auto;
margin: auto;
padding: 15px;
overflow: hidden;
border: 1px solid lightgrey;
position: relative;
height: 300px; }
.mobile-menu {
width: 80%;
max-width: 300px;
position: absolute;
top: 0;
right: auto;
bottom: 0;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
-webkit-transform: translate3d(-102%, 0, 0);
transform: translate3d(-102%, 0, 0);
left: 0;
z-index: 5;
box-shadow: 3px 0 4px lightgrey; }
.mobile-menu__header {
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #ff4081;
background: #fff; }
.mobile-menu__logo-wrapper {
width: 150px;
margin: 0 auto; }
.mobile-menu__list {
width: 100%;
height: 100%; }
.mobile-menu__item {
border-bottom: 1px solid lightgrey; }
.mobile-menu__link {
padding: 5px;
display: block; }
.mobile-menu__inner {
background: #f78a8a;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
#mobile-menu-trigger:checked + .mobile-menu {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
input[data-menu="menu"]:checked + .mobile-menu__inner {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.display-hidden {
display: none; }
.trigger-menu {
background: #91a2f7;
float: right; }
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
visibility: hidden;
opacity: 0;
transition: all 0.3s; }
.menu-open .bg {
opacity: 1;
visibility: visible; }
.logo {
width: 100%;
height: auto; }
.menu-back-trigger {
border-bottom: 1px solid #ff4081; }
Ответы
Ответ 1
В этой очень легкой задачке, как выдвижное меню, слишком сложная реализация.
Ты просто перегружаешь браузер ненужной работой, ни тебе, ни ему.
Зачем translate3d, если идет работа с чистейшим 2Д?
Я бегло посмотрел, но вероятно, вложенность тегов не учитывает слои для прорисовки
браузером, а они, в свою очередь, плохо заданы css свойствами.
Я советую покапать в сети о том, как браузер прорисовывает анимацию, что лучше использовать
transition или animation и в каких случаях.
Даже если эффект достигается один и тот же, зачастую два разных свойства оказывают
неравный след на производительности.
У меня есть такой пример: я пытался сделать тень на градиентном элементе. Дело в
том, что text-shadow рисуется поверх градиента (background-color: linear-gradient).
И это можно обойти двумя путями, в основном теге отрисовывать тень с помощью text-shadow,
а в псевдоклассе рисовать градиентный текст. Этот вариант я и выбрал, сейчас расскажу
почему. Либо же использовать filter: drop-shadow. И тут уже встает логический вопрос,
по простой внутренней логике понятно, ведь чтобы нарисовать простенькую тень, не хотелось
бы использовать фильтр. Почему? Если при этом ещё использовать transform: scale, то
браузер каждый кадр этого скейла будет отрисовывать новый фильтр. А это затратно и
на самом деле на моем стационарном компе, в Хроме, начинало подлагивать такое появление,
хотя анимация шла 80ms, то есть быстрее чем среднее моргание человека.
Так что вывод такой: нужно отрисовывать в голове и понимать, как рисует это всё браузер,
не использовать навороченные свойства в сторону их силы, а посмотреть на простенькие,
но эффективные в связке css-свойства.
Ответ 2
Вопрос слишком общий, так как это может зависеть от алгоритма, используемого при
анимации(например, движение в 1000 итераций по 1 пикселю будет больше, чем в 2 раза
хуже по времени и русурсам цп, чем движение в 500 итераций по 2 пикселя), тактовая
частота процессора(у мобильных устройств она обычно ниже), даже частота видеокарты
и даже конкретный движок, обрабатывающий JS\CSS(в разных браузерах он разный, хотя
уже вроде намечается консенсус в этом отношении в среде производителей браузеров)
Ответ 3
Твоем меню слишком сложное. Сделай вложенность меньше. Откажись от списка. Сделай
nav и в нем a. Также обнови jQuery до 3.1.1
Комментариев нет:
Отправить комментарий