Как анимации Greensock работают под капотом, что они так производительны?

Question

На сайте greensock есть тест скорости , сравнивающий скорость с другими библиотеками анимаций, JQuery или даже переходами CSS. Он измеряет FPS, анимируя сотни / тысячи текстов.

FPS анимации Гринсок превзошли все остальные. Css переходы и JQuery не очень близки к Greensock.

Я попытался найти гринсок, но не смог найти много полезной информации. Большинство из них плохо объяснены.

Я все еще любитель javascript. Если я попытаюсь сделать свою собственную анимацию JS, она будет не такой быстрой, как у gsap. Даже не близко. Так что было бы здорово узнать, что происходит под капотом. Как они так много оптимизируют!

Answer 1

Джек (создатель GreenSock) рассказывает, как GSAP работает так быстро в этом сообщении на форуме среди других мест. Подведем итог некоторым пунктам:

1. Использование высокооптимизированного JavaScript по всем направлениям (это влечет за собой множество вещей, таких как использование связанных списков, локальных переменных, таблиц быстрого поиска, встроенного кода, побитовых операторов, использование прототипов вместо воссоздания функций / переменных для каждого экземпляра и т. Д.)
2. Разработайте структуру платформы так, чтобы она очень хорошо подходила для ситуаций высокого давления, сводя к минимуму вызовы функций и следя за тем, чтобы все было дружественным к gc.
3. Вносить обновления в одном цикле обновления, который управляется requestAnimationFrame, при необходимости возвращаясь к setTimeout ().
4. Внутреннее кэширование некоторых важных значений для более быстрого обновления.
5. Для CSS-преобразований мы вычисляем значения матрицы и строим матрицу () или matrix3d ​​(), когда есть какое-либо вращение или перекос, потому что наши тесты показали, что это быстрее.

Там нет серебряной пули, которая делает это быстро. Это просто ум в том, что он делает вещи, основываясь на более чем десятилетнем опыте.