Производительность движущегося изображения на веб-странице через CSS и HTML5 Canvas

Ответ 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

Как вы можете видеть:

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

Изменить. Добавлены тесты для перемещения 20 небольших анимированных спрайтов на фоне. Выводы остаются неизменными.

Ответ 2

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

• Firefox Desktop и мобильная обе работают с анимацией CSS значительно быстрее, чем холст.

• Рабочий стол Chrome работает с холстами и анимациями CSS о том же

• 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 для этого?

Ответ 3

Понял, что я обновил этот старый вопрос своими выводами на iPad третьего поколения:

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

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

Ответ 4

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

Ответ 5

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

Я также внесли некоторые изменения в javascript canvas, чтобы иметь возможность рисовать на холсте разрешения сетчатки. Я добавил следующий код после 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