Должен ли я использовать фрагмент DOM как Shadow dom в моем игровом движке Javascript?

Question

Я создаю новый игровой движок для сети под названием Engine1.В настоящее время я произвел пару прототипов.До сих пор я был в состоянии:

1. Отобразить прозрачные пиксели спрайтов с помощью canvas.
2. Привязать события к непрозрачным пикселям спрайтов.
3. Разработатьвремя выполнения игры с заданным числом кадров в секунду.
4. Анимация спрайтов с изменяемой частотой кадров.
5. Анимация движения элементов, как
   1. , кадр за славой
   2. , так и с использованием кадрованимация движения

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

В настоящее время, когдаэлемент создан, его добавлен к фрагменту DOM, который я называю «Shadow DOM».Каждый фрейм HTML этого «Shadow DOM» копируется и вставляется в тело страницы (или в текущий порт просмотра).

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

Меня беспокоит то, что полученная производительность будет компенсирована необходимостью перетекания содержимого браузера, даже если будут изменены только части страницы.

Кроме того, привязка событий становится намного более сложной.

Есть мысли?

Должен ли я использовать "Shadow DOM"?

Есть лилучший способ визуализации большого количества элементов?

Есть ли способ копировать только отличия от "Shadow DOM" в тело браузера?

Answer 1

Замена больших кусков DOM может быть дорогой. В общем, DOM - это место, где возникают узкие места. Было бы лучше отслеживать, какие части DOM вы изменяете и обновляете. Вы можете сделать это в отдельной структуре данных, которую вы преобразуете в DOM при обновлении, или использовать теневой DOM, как вы сказали. Если изменения индивидуально велики, то может быть хорошей идеей использовать теневой DOM. Если они малы (например, просто обновляют текстовые значения), то имеет смысл использовать отдельный тип структуры данных.

В любом случае вам нужен третий объект, отслеживающий изменения.

Я написал Шаблоны кактусов давным-давно. Вы используете его, чтобы связать структуру DOM с объектом домена, позволяя обновлениям распространяться с одной стороны на другую. Он автоматически присоединяет события к указанным расположениям (пути значений ключей в домене и имена классов html в DOM). Это может или не может быть именно то, что вы ищете, но, возможно, вы можете получить некоторые идеи из этого.