У меня есть изображение и переместите его вокруг моей веб-страницы (JavaScript) следующим образом:
satelliteImage.style.top = coordinates.top + "px";
satelliteImage.style.left = coordinates.left + "px";
К сожалению, производительность довольно плохая во всех браузерах, кроме Chrome. Узким местом является скорость рендеринга. У меня нет надежды на IE, но я хочу улучшить Firefox как минимум. Кто-нибудь имеет опыт работы с холстом HTML5 при перемещении изображения по сравнению со стилем?
Я создал эквивалентные тесты для сравнения частоты кадров для перемещения изображения с помощью CSS и его рисования на холсте HTML. Вот тесты:
И вот результаты 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
Как вы можете видеть:
Изменить. Добавлены тесты для перемещения 20 небольших анимированных спрайтов на фоне. Выводы остаются неизменными.
Теперь прошло более двух лет, и я решил запустить эти тесты, чтобы убедиться, что это все еще верно. Он делает... и это не так.
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 для этого?
Понял, что я обновил этот старый вопрос своими выводами на iPad третьего поколения:
Холст выигрывает 2: 1 с анимацией спрайтов в среднем около 120 кадров в секунду с очисткой фона в обоих направлениях. CSS вряд ли может удовлетворить 60 кадров в секунду.
Что касается единственного изображения, CSS был определенно быстрее.
В моем опыте с Canvas вы сможете получить хорошие 50 кадров в секунду на Firefox и даже хорошие 15 кадров в секунду на iOS. IE9, вероятно, будет самым быстрым браузером, другие версии на самом деле не реализуют Canvas.
В дополнение к выводам 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