Позиционирование более 200 элементов div на каждом тике, быстрее ли это с HTML5-тегом ‹canvas›?

Я создаю игру с jQuery, где мне нужно обновлять 200+ (иногда 300) div каждый тик (около 0,02 секунды). Прямо сейчас производительность отличная (хотя и выходит за рамки) и работает в большинстве браузеров.

В моей игре используются «юниты», класс с функциями Create() и Update(). Create() создает div размером 32x32 и дает ему имя, а Update() устанавливает позицию двумя важными вызовами css:

    $("#unit"+this.uid).css("left", posx+"px");
    $("#unit"+this.uid).css("top", posy+"px");

Мне сказали, что HTML5 будет работать быстрее, «потому что содержимое холста HTML5 не меняет дерево DOM». Повлияет ли это в моем случае? Я бы протестировал это сам, но у меня нет опыта или знаний о HTML5, и я хотел бы знать, стоит ли мне сначала что-нибудь попробовать.

Заранее спасибо.


html jquery html5-canvas
person Nick    schedule 06.01.2012    source источник
comment
Возможно, вас заинтересует craftyjs.com – игровой фреймворк на основе сущностей/компонентов, поддерживающий элементы html5 и DOM.   -  person Stefan    schedule 06.01.2012
comment
Возможно — я думаю, что вам предложили использовать HTML5-тег <canvas> для рисования ваших единиц, а не использовать <div> для каждой единицы. Я сам не делал ничего подобного, поэтому понятия не имею, чего можно ожидать от производительности, но вот несколько демонстраций <canvas>, включая некоторые игры: canvasdemos.com   -  person Paul D. Waite    schedule 06.01.2012
comment
И в этом вопросе о переполнении стека обсуждается <canvas> производительность: /   -  person Paul D. Waite    schedule 06.01.2012
comment
Спасибо вам обоим, очень интересные ссылки!   -  person Nick    schedule 06.01.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете изучить переходы CSS3. Вы можете анимировать свойства css в течение определенного периода времени, а не каждый тик. Он также может использовать аппаратное ускорение в браузерах WebKit.

person Vigrond    schedule 06.01.2012