Щоб уникнути пригальмовування макета досить просто згрупувати разом DOM-запити і DOM-апдейти:
Виходячи з цього, можна порахувати ідеальний інтервал1000ms / 60 (fps) = 16.7ms
І що з цього випливає?
- setTimeout () і setInterval () не звертають увагу на те, що ще відбувається в браузері. Сторінка, на якій відбувається анімація, може знаходиться на неактивній вкладці браузера. І при цьому все одно будуть використовуватися ресурси процесора. На даний момент тільки Chrome робить інтервал анімації рівним 1fps на прихованих вкладках.
- SetTimeout () іsetInterval () вимагають перемальовування сторінки не тоді, коли це робить комп'ютер (а він робить це регулярно). Це означає, що браузер повинен синхронізувати вашу анімацію з оновленням всього екрану, і якщо її частота не синхронізована з оновленням всього екрану, це може зажадати більше обчислювальної потужності. А це завантаження процесора, витрата батареї мобільних пристроїв і смикати анімація.
- Найбільша проблема настає, коли потрібно анімувати кілька елементів відразу. Можна спробувати все це синхронізувати, але це стане черговим кошмаром в разі різнопланової анімації, яка відбувається одночасно.
Замість цього, розробники Mozilla запропонували використовувати функцію requestAnimationFrame (RAF), яка не потребує значної переробки існуючого коду. Можна порівняти базову реалізацію RAF і setInterval:
RAF робить максимально можливий поштовх в продуктивності анімації, який можна зробити змінивши всього лише одне місце в коді. RAF групує всі анімації в одному браузерномrepaint. Це економить ресурси процесора і дозволяє вашому пристрою бути швидше і жити довше.
Якщо ви використовуєте requestAnimationFrame, всі ваші анімації будуть гладкими і красивими, синхронізованими з вашим графічним процесором (GPU) і з'їдають набагато менше ресурсів центрального процесора (CPU).
CSS переходи
CSS переходи перевершили за швидкодією jQuery завдяки перенесенню логіки анімації безпосередньо в движок браузера, який є ефективним у випадках:
- Оптимізації взаємодії DOM і споживання пам'яті, щоб уникнути ривків в браузері
- Покращення роботи алгоритмів RAF
- Використанні апаратного прискорення (використовуючи потужності GPU для поліпшення продуктивності анімації)
Уже можна сміливо говорити про те, що:
Щоб порівняти продуктивність популярних бібліотек анімації, в т.ч. Transit, який використовує CSS-переходи, перейдемо до Velocity документації.
- Синхронізація DOM зі стеком
- Кешування значень властивостей, щоб звести до мінімуму DOM запитів (це є найбільшою проблемою в продуктивності DOM анімації)
- Кешування перетворених одиниць вимірювань (наприклад, px в%, em та ін.) Через взаємопов'язані елементи за один виклик
- Пропуск оновлень стилів, коли візуально оновлення будуть не потрібні.
У Velocity.js використовується краще методи кешування кінцевих значень анімації для повторного використання в якості наступних стартових значень для наступної анімації - таким чином уникаючи перевизова DOM:
У цьому прикладі, Velocity вже знає, що другий виклик повинен запуститися зі стартовим значенням прозорості opacity: 1 і значення top - 50%.
І нарешті, давайте порівняємо дві бібліотеки - Velocity. Js і GSAP
- GSAP - швидкий, з великими можливостями анімаційної платформи. Velocity вдає із себе простий інструмент для кардинального поліпшення продуктивності UI анімації і робочого процесу
- GSAP - комерційна бібліотека. коштує певних грошей. Velocity - бібліотека з відкритим вихідним кодом за ліцензією MIT.
- C точки зору продуктивності, Velocity. Js і GSAP невиразні в реальних проектах.
Таким чином, GSAP слід використовувати тоді, коли потрібен точний контроль над часом виконання (н-р, remapping, pause / resume / seek), рух (н-р, криві Безьє) або складна угруповання. Ці особливості мають вирішальне значення при розробці ігор і деяких нішевих додатків, але вони менш поширені в веб-додатках, при розробці сайтів.
Velocity.js
Те що було багато часу приділено GSAP не означає, що про особливості Velocity НЕ буде розказано. Навпаки. У 7kb стисненого коду, Velocity не тільки повторює всю фунціональность $ .animate () в jQuery, але також доповнює його за частиною анімації, трансформації, обертання, плавності, і прокрутки.
Velocity є краще, ніж jQuery, jQuery UI, і CSS переходи разом узяті.
Використовує метод jQuery - $ .queue (), і таким чином взаємодіє легко з $ .animate (), $ .fade () і $ .delay функціями jQuery. Також синтаксис Velocity є схожим на $ .animate () і не один елемент коду на сторінці не потребує зміни.
Розглянемо Velocity.js на прикладі
У Velocity складні сцени прокрутки з 3D-анімацією можуть бути створені двома простими рядками коду:
Метою Velocity є залишатися лідером в продуктивності анімації і зручності.
Олексій дуже досвідчений програміст і хороша людина. Завжди робить все вчасно, а іноді і швидше, ніж обіцяє. Якість роботи на 5 з 5. Часто пропонує альтернативу або кращий варіант. Що дуже ВАЖЛИВО - завжди на зв'язку (майже цілодобово). Завжди уважний до дрібниць, що не часто зустрічається у розробників. Відповідальний. Нормальні ціни. Загалом одні позитивні емоції від робочого процесу і результатів. Олексій, спасибі за якісно виконану роботу! Рекомендую.
Максим Іванов, Директор магазину молодіжного одягу ACIDWEAR.ru