我应该在我的Javascript游戏引擎中使用DOM片段作为Shadow dom吗？

Question

我正在为Engine1创建一个新的游戏引擎.我目前已经制作了几个原型.到目前为止,我已经能够:

1. 使用画布映射精灵的透明像素.
2. 将事件绑定到精灵的不透明像素.
3. 使用set fps开发游戏运行时.
4. 在可变帧时间动画精灵.
5. 动画元素运动,两者
   1. 一举成名
   2. 并使用基于帧的补间动画

我很满意我的进步,但我似乎对在没有咨询DOM性能专家的情况下进一步推进感到不安.

目前,当创建一个元素时,它附加到一个DOM片段,我称之为"Shadow DOM".每个帧都将这个"Shadow DOM"的HTML复制并插入到页面主体(或当前视图端口)中.

我已经这样设置了,因为我可以在浏览器的一次重新流程中将所有内容添加到页面中.

我担心的是,即使只更改了部分页面,重新流动浏览器内容的需要也会抵消所获得的性能.

此外,事件绑定变得更加复杂.

有什么想法吗？

我应该使用"Shadow DOM"吗？

有没有更好的方法来渲染大量元素？

有没有办法只将"Shadow DOM"中的差异复制到浏览器主体？

Answer 1

替换大块 DOM 可能会很昂贵。一般来说，DOM 是出现瓶颈的地方。最好跟踪您正在修改和更新 DOM 的哪些部分。您可以在更新时转换为 DOM 的单独数据结构中执行此操作，也可以像您所说的那样使用影子 DOM。如果单独的更改很大，那么使用影子 DOM 可能是个好主意。如果它们很小（例如仅更新文本值），那么使用单独类型的数据结构会更有意义。

无论哪种情况，您都需要第三个对象来跟踪更改。

我很久以前写了仙人掌模板。您可以使用它将 DOM 结构与域对象绑定在一起，让更新从一侧传播到另一侧。它自动将事件附加到指定的位置（域中的键值路径和 DOM 中的 html 类名）。它可能是也可能不是您正在寻找的东西，但也许您可以从中得到一些想法。