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

Мне интересно, есть ли разница в производительности использования 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 для этого элемента).

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

CSS-анимации намного быстрее, чем запрос, и любые библиотеки, которые работают с javascript. Причина в том, что платформа CSS3 использует GPU, а не процессор. Анимация - это обширные операции с процессором, умножения матриц и преобразование Фурье на каждом пикселе делают анимацию тяжелой.

Ниже приведена очень хорошо объясненная статья. пройдите через него, который сравнивает CSS, jquery и GSAP.

Библиотека GSAP в 20 раз быстрее, чем jQuery.

http://knowledge-cess.com/animation-and-the-role-of-gpu-a-performance-factor/