Should I use a DOM fragment as a Shadow dom in my Javascript game engine?

I'm creating a new game engine for the web by the name of Engine1. I've currently produced a couple prototypes. So far I've been able to:

1. Map the transparent pixels of sprites using canvas.
2. Bind events to the opaque pixels of sprites.
3. Develop a game runtime with a set fps.
4. Animate sprites at variable frame timing.
5. Animate element movement, both
   1. frame by fame
   2. and with frame based motion tween

I'm happy with my progress but I seem to be uncomfortable with advancing further without consulting an expert in DOM performance.

Currently when an element is created, its appended to a DOM fragment I call the "Shadow DOM". Every frame this "Shadow DOM"'s HTML is copied and inserted into the body of the page (or the current view port).

I've set it up this way because I can add everything to the page in one re-flow of the browser.

My concern is that the performance gai开发者_如何转开发ned will be offset by the need to re flow the contents of the browser, even if only parts of the page are changed.

Also, event binding gets much more complicated.

Any thoughts?

Should I use a "Shadow DOM"?

Is there a better way to render a large number of elements?

Is there a way to only copy differences from the "Shadow DOM" to the browser body?

---

Replacing large chunks of the DOM may be expensive. In general the DOM is where bottlenecks occur. It would be better to keep track of what parts of the DOM you are modifying and updating these. You can either do that in a separate data structure that you transform into DOM when updating, or use a shadow DOM like you said. If the changes are individually large then it may be a good idea to use a shadow DOM. If they are small (such as just updating text values) then it would make more sense to use a separate type of data structure.

In either case you need a third object keeping track of changes.

I wrote Cactus Templates a long time ago. You use it to bind a DOM structure together with a domain object letting updates propagate from either side to the other. It automatically attaches events to locations specified (key value paths in the domain and html class names in the DOM). It may or may not be exactly what you're looking for but perhaps you can get some ideas from it.