Мне интересно, есть ли разница в производительности использования CSS Transitions или какой-либо из различных библиотек анимации JavaScript? (script.aculo.us, scripty2, jsAnim, MooTools, $fx и т.д.).
Я пробовал различные тесты в Safari и Chrome, но на самом деле я не вижу никакой разницы. Я думал, что переходы CSS должны быть аппаратно ускорены.
Обновление
Я попытался использовать Scriptaculous 'Effect.Fade на 5 разных DIV (каждый из которых содержит холст с некоторыми строками). Выполняя то же самое, используя CSS-переходы, я не вижу абсолютно никакой разницы в производительности. Оба были очень гладкими с одним DIV/Canvas, но оба они очень медленны, когда я делаю больше 2 за раз.
Я пробовал это в Safari 4, 5 (OSX), Google Chrome 5 и FireFox 3.7pre. Те же результаты по всем направлениям.
В ответ на ответ UpHelix вы не просто ограничены hover и т.д. Вы можете вызвать переход, изменив любой стиль transitionable. Например, установите непрозрачность элемента в JavaScript (после этого вы указали transitionPropery и transitionDuration для этого элемента).
Да, есть разница, CSS намного быстрее. Это может быть трудно увидеть, пока вы не начнете много бегать одновременно или тем более они это сделают. CSS анимации ограничены, хотя. В большинстве случаев они действительно работают только на событии :hover. С помощью JavaScript можно выполнить анимацию в любом случае: click, mouseover, mousemove, mouseout, keyup, keydown и т.д.
На мой взгляд, jQuery является лучшим для JavaScript-анимации в 2010 году. См. Демонстрации jQuery
Чтобы добавить к Uphelix (правильный) ответ: JavaScript - это интерпретируемый язык, а механизм JS браузера должен анализировать и выполнять каждую инструкцию во время выполнения (я знаю, что существуют JS-компиляторы, такие как V8 (используется в Chrome), но принцип остается тем же).
С другой стороны, браузеры могут реализовывать переходы CSS изначально, например. в C/С++ или что-то в этом роде. Этот код будет скомпилирован для машинного языка.
Если CSS-переходы аппаратно ускорены или нет, зависит от методов, используемых браузером, платформы, на которой работает браузер, и т.д.
Вы заметите разницу в мобильных браузерах (iPhone, Android и т.д.).
CSS-анимации имеют то преимущество, что они обрабатываются браузером. Доступны быстрые вычисления и оптимизации. По моему мнению, производительность веб-анимации следует рассматривать с помощью "целостной" точки зрения. Ведь анимация с точки зрения FPS не может быть быстрее, чем обновление браузера.
Реальный уровень производительности определяется общей производительностью пользовательского интерфейса. JS и CSS-анимация могут выглядеть схожими. Однако анимации CSS выигрывают, так как они не блокируют поток пользовательского интерфейса.
Стоян Стефанов написал и продемонстрировал, как анимация CSS выведена из потока пользовательского интерфейса: http://www.phpied.com/css-animations-off-the-ui-thread/
CSS-анимации намного быстрее, чем запрос, и любые библиотеки, которые работают с javascript. Причина в том, что платформа CSS3 использует GPU, а не процессор. Анимация - это обширные операции с процессором, умножения матриц и преобразование Фурье на каждом пикселе делают анимацию тяжелой.
Ниже приведена очень хорошо объясненная статья. пройдите через него, который сравнивает CSS, jquery и GSAP.
Библиотека GSAP в 20 раз быстрее, чем jQuery.
http://knowledge-cess.com/animation-and-the-role-of-gpu-a-performance-factor/