JS анимация архитектурный дизайн для оптимальной производительности
Повышение производительности анимационного движка GreenSock довольно впечатляюще.
Какие основополагающие архитектурные решения и компромиссы делает эта библиотека для достижения таких выгод? В частности, чем этот движок отличается от jQuery animate?
2 ответа
Отличный ответ здесь от людей в Гринсок:
- Используйте высокооптимизированный JavaScript по всем направлениям (это влечет за собой множество вещей, таких как использование связанных списков, локальных переменных, таблиц быстрого поиска, встроенного кода, побитовых операторов, использование прототипов вместо воссоздания функций / переменных для каждого экземпляра и т. Д.)
- Разработайте структуру платформы так, чтобы она очень хорошо подходила для ситуаций высокого давления, сводя к минимуму вызовы функций и следя за тем, чтобы все было дружественным к gc.
- Вносите обновления в одном цикле обновления, который управляется requestAnimationFrame, и только при необходимости обращайтесь к setTimeout().
- Внутреннее кэширование некоторых важных значений для более быстрого обновления.
- Для CSS-преобразований мы вычисляем значения матрицы и создаем или matrix(), или matrix3d (), когда есть какое-либо вращение или перекос, потому что наши тесты показали, что это быстрее.
Подробнее здесь: http://forums.greensock.com/topic/9346-how-does-greensock-perform-better-than-other-solutions-for-animation/
Так быстро, как я знаю из флэш-версии:
- JQuery - это сборка, спроектированная и оптимизированная для скорости.
- Использование пула объектов, то есть переработка нескольких типов внутренних объектов для минимизации реализации
- его использование оптимизированных циклов для каждого сценария
- он использует информационные объекты, чтобы помочь / указать, какие свойства анимируются.
- Я не уверен, что они используют одни и те же функции замедления, но это тоже может иметь значение.
Tweenlite имеет долгую историю как tweenengine, а также имеет много функций, которые не включены в jQuery.