От чего зависит плавность сайтов?

350

01 января 2017, 19:52

От чего зависит плавность сайтов? Имею в виду разные эфекты появления меню, слайдеры, скроллы и тп. Сделал меню, на пк проверяю все нормально, плавно, красиво. Но, когда дело доходит до проверки на моб. устройствах мне становится стыдно. Все рывками, дергается, непонятно как смещается и тп. Даже обычный скролл тупит.

Подскажите, как правильно делать плавную верстку, от чего это зависит(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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
 
    <label class="trigger-menu" for="mobile-menu-trigger">Trigger</label> 
    <input id="mobile-menu-trigger" class="display-hidden" type="checkbox"> 
    <nav class="mobile-menu"> 
      <header class="mobile-menu__header"> 
        <div class="mobile-menu__logo-wrapper"> 
          <img class="logo" src="http://placehold.it/150x30"> 
        </div> 
      </header> 
      <ul class="mobile-menu__list"> 
        <li class="mobile-menu__item"> 
          <label class="mobile-menu__link" for="menu-inner-trigger-1">Category</label> 
          <input id="menu-inner-trigger-1" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu"> 
          <div class="mobile-menu__inner"> 
            <label class="mobile-menu__link menu-back-trigger" for="menu-inner-trigger-1">Category</label> 
            <ul class="mobile-menu__inner-list"> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category2 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category3 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category4 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category5 
                </a> 
              </li> 
            </ul> 
          </div> 
        </li> 
        <li class="mobile-menu__item"> 
          <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label> 
          <input id="menu-inner-trigger-2" class="menu-inner-trigger display-hidden" type="checkbox" data-menu="menu"> 
          <div class="mobile-menu__inner"> 
            <label class="mobile-menu__link" for="menu-inner-trigger-2">Category2</label> 
            <ul class="mobile-menu__inner-list"> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category2 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category3 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category4 
                </a> 
              </li> 
              <li class="mobile-menu__inner-item"> 
                <a href="#" class="mobile-menu__link"> 
                  Inner category5 
                </a> 
              </li> 
            </ul> 
          </div> 
        </li> 
        <li class="mobile-menu__item"> 
          <a href="#" class="mobile-menu__link"> 
            Delivery 
          </a> 
        </li> 
        <li class="mobile-menu__item"> 
          <a href="#" class="mobile-menu__link"> 
            About 
          </a> 
        </li> 
      </ul> 
    </nav> 
    <div class="bg"></div>

Answer 1

Вопрос слишком общий, так как это может зависеть от алгоритма, используемого при анимации(например, движение в 1000 итераций по 1 пикселю будет больше, чем в 2 раза хуже по времени и русурсам цп, чем движение в 500 итераций по 2 пикселя), тактовая частота процессора(у мобильных устройств она обычно ниже), даже частота видеокарты и даже конкретный движок, обрабатывающий JS\CSS(в разных браузерах он разный, хотя уже вроде намечается консенсус в этом отношении в среде производителей браузеров)

Answer 2

В этой очень легкой задачке, как выдвижное меню, слишком сложная реализация. Ты просто перегружаешь браузер ненужной работой, ни тебе, ни ему. Зачем translate3d, если идет работа с чистейшим 2Д? Я бегло посмотрел, но вероятно, вложенность тегов не учитывает слои для прорисовки браузером, а они, в свою очередь, плохо заданы css свойствами. Я советую покапать в сети о том, как браузер прорисовывает анимацию, что лучше использовать transition или animation и в каких случаях. Даже если эффект достигается один и тот же, зачастую два разных свойства оказывают неравный след на производительности. У меня есть такой пример: я пытался сделать тень на градиентном элементе. Дело в том, что text-shadow рисуется поверх градиента (background-color: linear-gradient). И это можно обойти двумя путями, в основном теге отрисовывать тень с помощью text-shadow, а в псевдоклассе рисовать градиентный текст. Этот вариант я и выбрал, сейчас расскажу почему. Либо же использовать filter: drop-shadow. И тут уже встает логический вопрос, по простой внутренней логике понятно, ведь чтобы нарисовать простенькую тень, не хотелось бы использовать фильтр. Почему? Если при этом ещё использовать transform: scale, то браузер каждый кадр этого скейла будет отрисовывать новый фильтр. А это затратно и на самом деле на моем стационарном компе, в Хроме, начинало подлагивать такое появление, хотя анимация шла 80ms, то есть быстрее чем среднее моргание человека. Так что вывод такой: нужно отрисовывать в голове и понимать, как рисует это всё браузер, не использовать навороченные свойства в сторону их силы, а посмотреть на простенькие, но эффективные в связке css-свойства.

Answer 3

Твоем меню слишком сложное. Сделай вложенность меньше. Откажись от списка. Сделай nav и в нем a. Также обнови jQuery до 3.1.1

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Путь к файлу в JQuery

Есть selectbox инклюдит php файлы по выборуФайлы находятся для инклюда в этой же директории category1

551

Java

NavigationDrawer и фрагменты

Добрый день! Делаю приложение на андроид, решил взять интерфейс с NavigationDrawer и фрагментамиТо есть, в дравере несколько вкладок, при нажатии...

397

Java

Как изменить значение select при изменении другого select

Есть jsp-страница, на нее я передаю в select список стран, у каждой страны есть список городов, который есть в моей БД отдельной таблицейКак сделать...

530

Java

Организация swing приложения [требует правки]

Где можно почитать про правильную организацию(проектирование) swing приложения: где выделять память, инициализровать, добавлять слушателей...

390