Почему если перемещать элемент в Canvas он перемещается в условных 60fps, а если внутри DIV то там тормоза?

Question

[bpGusar]

Почему если перемещать элемент в Canvas он перемещается в условных 60fps, а если внутри DIV то там тормоза?
Тормозит производительность, и не понятно почему, даже если расположить DIV на канвасе, и двигая DIV передвигать элемент на канвасе то всё равно элемент канваса быстро и плавно двигается а DIV очень медленно и тормознуто.

Есть ли способы такое вылечить?

Comments

[Ярослав Иванов]

Почитайте про то что такое canvas и как рендрится DOM дерево из тегов.
Это никак не лечится это нормальное поведение. Для динамических действий теги не двигают. Игры с html тегами не делают.

[bpGusar]

Ярослав Иванов, как тогда можно поступить, если например на канвасе есть точка и необходимо ее двигать, создав ее копию в виде условно div (так нужно для того что бы можно было фокус на точку ставить и табом на нее переключаться) ?

[Сергей delphinpro]

Ярослав Иванов, Дима Турков, вы переработали что ли? =)) теги не двигают, кирпичики, которые должны стоять... никогда dom анимации не видели? десятки каруселей с разными эффектами, сотни примеров на кодпене, целые библиотеки для анимации написаны, велосити там, еще какие-то, да тот же jquery.animate, элементарный драг-энд-дроп всегда прекрасно работал.
Просто автор хрень какую-нибудь написал, вот она у него и тормозит. А показать стесняется. =))

[Ярослав Иванов]

Сергей delphinpro, я написал игру платформер где вместо канваса у меня было все на тегах, которые меняли свою позицию каждую долю секунды ) dom рендрится очень менденно даже если не целиком а локальная его часть) Конечно можно что-то кешировать но любая крупная динамика это canvas (если игры имеем ввиду)

[Ярослав Иванов]

Сергей delphinpro, Если я на ваниле напишу дрэг он тоже будет зависать еще как ) в джуйквари ui он иначе реализован.

[Ярослав Иванов]

Сергей delphinpro, dom анимация вообще по-другому работает)

[Сергей delphinpro]

Ярослав Иванов, не, про игры разговора нет, тут я не спорю.
А вот drag'n'drop на ваниле я буквально на днях делал, и даже не могу представить, что там может тормозить.

[Сергей delphinpro]

Ярослав Иванов, да вон там сам автор внизу пример привел, он не лагает.

[Ярослав Иванов]

Сергей delphinpro, а ты быстро очень подергай шарик)

[Ярослав Иванов]

Сергей delphinpro, и дрэг тоже) ближе к скорости света он уже отстает))))

[Дима Паутов]

Сергей delphinpro, я написал в целом. Мелкие анимации почему нет! Но я имел ввиду, если пытаться html теги использовать как canvas

Answer 1

[Дима Паутов]

Canvas и html теги, это совершенно разные по логике и устройству вещи. Html теги никогда не подразумевали в себе динамическое перемещение, изменение, да и создание DOM элементов раньше не казалось чем-то нужным. Это сейчас всё изменилось, но отголоски это живут и сейчас из за обратной совместимости. Это кирпичики, которые просто должны стоять.

Самый простой и наиболее производительный вариант для тегов это css трансформации. Больше вы ничего не сделаете. Либо, всё рисуйте на canvas

Answer 2

[GreatRash]

А как вы двигаете чо-там-у-вас внутри div?

Comments

[bpGusar]

мой механизм очень похож на этот пример, но тут почему то всё плавно ((

[GreatRash]

bpGusar, очень похож или точно такой же?

[bpGusar]

GreatRash, оооочень похож, ну то есть почти один в один, с небольшими изменениями

[GreatRash]

bpGusar, без примера с тормозами сложно что-то понять.