Производительность перемещения изображения на веб-странице с помощью CSS и HTML5 Canvas

Question

У меня есть изображение, и я перемещаю его по моей веб-странице (JavaScript) следующим образом:

satelliteImage.style.top = coordinates.top + "px";
satelliteImage.style.left = coordinates.left + "px";

К сожалению, производительность довольно низкая во всех браузерах, кроме Chrome.Узким местом является скорость рендеринга.У меня нет надежды на IE, но я хочу улучшить Firefox по крайней мере.У кого-нибудь есть опыт работы с HTML5 Canvas при перемещении изображения по сравнению со сменой стиля?

Answer 1

Я создал эквивалентные тесты для сравнения частоты кадров при перемещении изображения с помощью CSS и рисования его на холсте HTML. Вот тесты:

• Перемещение изображения с помощью Canvas
• Перемещение изображения с помощью CSS
• Перемещение 20 спрайтов с помощью Canvas на фоне 1024x768
• Перемещение 20 спрайтов с помощью CSS на фоне 1024x768

А вот результаты FPS (подробности теста см. В URL):

                  Image  Image  Sprite  Sprite
        Browser  Canvas    CSS  Canvas     CSS
----------------------------------------------
  Safari v5.0.3      59     95      59      89
Firefox v3.6.13      59     95      60      90
 Firefox v4.0b8      75     89      78      82
    Chrome v8.0     108    230     120     204
    iPad, Horiz      17     44       2      14
     iPad, Vert       4     75       2      15

Как видите:

1. Вы всегда получите лучшие результаты при перемещении изображения в виде элемента HTML, чем при перерисовке части холста, и
2. Вы вероятно возможно делаете что-то не так, если вы получаете только 5fps.

Редактировать : Добавлены тесты для перемещения 20 маленьких анимированных спрайтов по фону. Выводы остаются прежними.

Answer 2

Прошло уже более 2 лет, и я решил запустить эти тесты, чтобы проверить, так ли это до сих пор.Он работает ... и не работает.

1. Рабочий стол Firefox и мобильный оба запускают CSS-анимацию значительно быстрее, чем canvas.

2. Рабочий стол Chrome запускает холст и CSS-анимации примерно одинаково

3. Chrome Mobile (на Nexus 7) работает с точностью до наоборот: холст работает значительно быстрее, чем CSS!

(Использование Firefox Android с Nexus 7 и настольных браузеров в Linux с разрешением 1920x1080)

Browser/OS          Canvas Image   CSS IMage   Canvas Sprites   CSS Sprites    
-----------         ------------   ----------  --------------   -----------
Firefox 16          56.7fps        215.6 fps   59.2fps          203.6fps
Firefox 16 Android  17.1 fps       179.6fps    11.5fps          35.7
Chrome 22           192.3fps       223.5fps    170.1fps         164.3fps
Chrome Android      48.3fps        39.9fps     92.8fps          13.1fps

Что получают все остальные?Кто-нибудь может протестировать IE9, 10 для этого?

Answer 3

Я хотел бы обновить этот старый вопрос своими результатами на iPad 3-го поколения:

Canvas выигрывает 2: 1 со спрайтовыми анимациями в среднем около 120 кадров в секунду с очисткой фона, переключаемой в обе стороны.CSS едва мог соответствовать 60 кадрам в секунду.

Что касается одного изображения, CSS определенно был быстрее.

Answer 4

По моему опыту работы с Canvas вы сможете получить хорошие 50 кадров в секунду на Firefox и даже хорошие 15 кадров в секунду на iOS. IE9, вероятно, будет самым быстрым браузером, другие версии не поддерживают Canvas.

Answer 5

В дополнение к выводам MyNameIsKo о производительности iPad 3. Мне было интересно, связано ли это с тем, что метод CSS DOM должен был беспокоиться о рисовании на экране сетчатки iPad 3, тогда как холст рисовался бы с более низким разрешением, а затем появлялся на экране. IPad 1 значительно быстрее обновляет CSS, чем iPad3!

Я также внес некоторые изменения в javascript для холста, чтобы иметь возможность рисовать на холсте с разрешением сетчатки. Я добавил следующий код после canv.height = h; в функции bg.onload:

if (window.devicePixelRatio) {
    ctx.canvas.style.width = w + "px";
    ctx.canvas.style.height = h + "px";
    ctx.canvas.height = h * window.devicePixelRatio;
    ctx.canvas.width = w * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

, который сделал огромное снижение производительности ...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

                      CSS Sprite        Canvas Sprites
-----------------------------------------------------
iPad 1                   90                  100
iPad 3                   55                  120
iPad 1(canvas changes)   n/a                 100
iPad 3(canvas changes)   n/a                 35