Производительность CSS-переходов и JS-пакетов анимации

Question

Мне интересно, есть ли разница в производительности использования переходов CSS по сравнению с любой из различных библиотек анимации JavaScript? (script.aculo.us, scripty2, jsAnim, MooTools, $fx и т. Д.).

Я пробовал различные тесты в Safari и Chrome , но на самом деле я не вижу никакой разницы. Я думал, что CSS-переходы должны были быть аппаратно ускорены.

---

Обновление

Я пытался использовать Scriptaculous 'Effect.Fade на 5 различных DIV (каждый из которых содержит холст с несколькими линиями). Делая то же самое с помощью CSS-переходов, я не вижу абсолютно никакой разницы в производительности. Оба были очень плавными с одним DIV / Canvas, но оба очень медленные, когда я делаю больше двух раз.

Я пробовал это в Safari 4, 5 (OSX) , Google Chrome 5 и FireFox 3.7pre . Такие же результаты по всем направлениям.

В ответ на ответ UpHelix вы не просто ограничены hover и т. Д. Вы можете инициировать переход, изменив любой стиль transitionable. Например, установите непрозрачность элемента в JavaScript (после того, как вы указали transitionPropery и transitionDuration для этого элемента).

Answer 1

Да, есть разница, CSS намного быстрее. Это может быть трудно увидеть, пока вы не начнете много бегать одновременно или тем более они это сделают. CSS анимации ограничены, хотя. В большинстве случаев они действительно работают только на событии :hover. С помощью JavaScript вы можете выполнять анимацию в любом событии: click, mouseover, mousemove, mouseout, keyup, keydown и т. Д.

На мой взгляд, jQuery является лучшим для JavaScript-анимации в 2010 году. См. jQuery Demos

Answer 2

Чтобы добавить к (правильному) ответу Uphelix: JavaScript - это интерпретируемый язык, и движок JS браузера должен анализировать и выполнять каждую инструкцию во время выполнения (я знаю, что существуют JS-компиляторы, такие как V8 (используется в Chrome), но принцип остается тем же).

С другой стороны, браузеры могут реализовывать переходы CSS изначально, например, в C / C ++ или что-то еще.Этот код будет скомпилирован на машинном языке.

Если CSS-переходы аппаратно ускоряются или нет, зависит от методов, используемых браузером, платформы, на которой он работает, и т. Д.

Answer 3

CSS-анимации имеют то преимущество, что обрабатываются браузером. Доступны быстрые вычисления и оптимизации. На мой взгляд, производительность веб-анимации следует рассматривать с «целостной» точки зрения. Ведь анимация, с точки зрения FPS, не может быть быстрее обновления браузера.

Реальный уровень производительности определяется общей производительностью пользовательского интерфейса. JS и CSS анимация могут выглядеть одинаково. Однако анимации CSS выигрывают, так как они не блокируют поток пользовательского интерфейса.

Стоян Стефанов написал и продемонстрировал, как CSS-анимация выводится из потока пользовательского интерфейса: http://www.phpied.com/css-animations-off-the-ui-thread/

Answer 4

Вы заметите разницу в мобильных браузерах (iPhone, Android и т. Д.).