Позиционирование 200+ div каждого тика, это быстрее с тегом HTML5 <canvas>?

Question

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

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

Answer 1

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