Выполнение Переходов CSS по сравнению с пакетами анимации JS
Я задаюсь вопросом, там какая-либо разница в производительности использования Переходов CSS по сравнению с какой-либо из различных библиотек анимации JavaScript? (script.aculo.us, scripty2, jsAnim, MooTools, $fx, и т.д.).
Я попробовал различные тесты в Safari и Chrome, но я на самом деле не вижу различия. Я думал, что Переходы CSS, как предполагалось, были аппаратно ускорены.
Обновление:
Я попытался использовать Scriptaculous Effect.Fade на 5 различных ОТДЕЛЕНИЯХ (каждый содержащий холст с некоторыми строками). Делая ту же самую вещь с помощью переходов CSS, я не вижу абсолютно никакой разницы в производительности. Оба были очень гладкими с одним DIV/холстом, но оба являются очень медленными, когда я делаю больше чем 2 за один раз.
Я попробовал это в Safari 4, 5 (OSX), Google Chrome 5 и FireFox 3.7pre. Те же результаты через плату.
В ответе на ответ UpHelix Вы просто не ограничены hover, и т.д. Можно инициировать переход путем изменения любого transitionable стиль. Например, установите непрозрачность элемента в JavaScript (после определения transitionPropery и transitionDuration для того элемента).
2 ответа
Чтобы добавить к (правильному) ответу Uphelix: JavaScript - это интерпретируемый язык, и JS-движок браузера должен анализировать и выполнять каждую инструкцию во время выполнения (я знаю, что существуют JS-компиляторы, как V8 (используется в Chrome), но принцип остается прежним).
С другой стороны, браузеры могут реализовывать переходы CSS изначально, например в C / C ++ или что-то в этом роде. Этот код будет скомпилирован на машинный язык.
Если переходы CSS ускоряются аппаратно или нет, это зависит от методов, используемых браузером, платформы, на которой он работает, и т. Д.
Да, разница есть, CSS намного быстрее. Это может быть трудно заметить, пока не будет запущено много анимаций одновременно или чем больше их будет, тем быстрее они будут работать. Однако CSS-анимация ограничена. В большинстве случаев они работают только на событие :hover. С помощью JavaScript вы можете выполнять анимацию при любом событии: click, mouseover, mousemove, mouseout, keyup, keydown и т.д.
На мой взгляд, jQuery является лучшим для JavaScript-анимации в 2010 году. Смотрите jQuery Demos