КПД <canvas>и <div>с - PullRequest
Новая
       14

КПД <canvas>и <div>с

11 голосов
/ 04 ноября 2011

Я хочу спросить, может ли кто-нибудь дать мне несколько советов по поводу дизайнерского решения, которое я хочу принять.

В моем проекте будет несколько спрайтов (ожидаемых на экране от 10 до 30 одновременно), и существует несколько способов их реализации. Один из способов - это CSS-спрайты, другой - рисовать их на холсте. Оба не сложны. Фон будет плиткой-картой, нарисованной другим <canvas>, в фоновом режиме.

Я видел, что Лукавый присоединяет спрайтов как <div>, который находится в HTML внутри <canvas>, как CSS-спрайт. Я не уверен, есть ли разница в скорости, если <div> в холсте или нет. Есть ли разница?

Я ожидаю, что пользователь будет взаимодействовать со спрайтами, щелкая мышью, влево, вправо и т. Д. И спрайты, конечно, стоят или ходят по элементам карты тайлов. Так что более эффективно написать обработчик для <canvas> и найти спрайт, или, скорее, использовать <div> и позволить браузеру обработать поиск?

Я надеюсь, что смогу сообщить о своей проблеме.

Ответы [ 3 ]

11 голосов
/ 04 ноября 2011

Мои тесты показывают, что чистый HTML + CSS обычно быстрее для спрайтов, чем Canvas:
Производительность перемещения изображения на веб-странице с помощью CSS по сравнению с HTML5 Canvas

См. Тесты иРезультаты (из браузеров 10 месяцев назад) здесь:
http://phrogz.net/tmp/image_move_speed.html

В частности, у меня есть два теста, почти точно так же, как ваш вопрос:

Суммированный FPS: 

                  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

Более поздние браузеры, как правило, намногобыстрее (Chrome почти всегда достигает 250 к / с на одной и той же машине) и больше сокращает разрыв, но использование Canvas все еще медленнее и требует гораздо больше работы.

0 голосов
/ 04 ноября 2011

Холст будет быстрее, хотя при таком малом количестве объектов это не будет иметь большого значения * .Вы должны использовать Canvas независимо от того, потому что, если вы когда-нибудь планируете расширить его, чтобы сделать его более сложным, более отшлифованным, или вам нужны специальные эффекты (например, частицы), или иметь больше объектов, холст станет необходимостью.

Еслиэто будет работать как игра, используйте Canvas.Но если он будет работать как картографическое приложение, SVG не является плохой альтернативой, поскольку некоторые из событийных мероприятий уже сделаны для вас.Я предполагаю, что этот проект ближе к игре.

Я дал гораздо более длинные ответы на вопросы, подобные этому, например, здесь: HTML5 Canvas против SVG против div

Фоном будет карта тайла, нарисованная другим, на заднем плане

Для производительности просто установите холст 'css background-image, чтобы быть этим тайлом-карта!(при условии, что это не изменится)

0 голосов
/ 04 ноября 2011

Холст имеет лучшую производительность.

Он оптимизирован для такого поведения.

...