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

Question

我正在为网络创建一个名为 Engine1 的新游戏引擎。我目前已经制作了几个原型(prototype)。到目前为止，我已经能够:

1. 使用 Canvas 映射 Sprite 的透明像素。
2. 将事件绑定(bind)到 Sprite 的不透明像素。
3. 开发具有设定 fps 的游戏运行时。
4. 以可变的帧时间为 Sprite 制作动画。
5. 动画元素运动，两者
   1. 成名
   2. 以及基于帧的补间动画

我对自己的进步感到满意，但我似乎对在没有咨询 DOM 性能专家的情况下进一步进步感到不自在。

目前，当创建一个元素时，它会附加到一个 DOM 片段，我称之为“Shadow DOM”。这个“Shadow DOM”的 HTML 的每一帧都被复制并插入到页面主体(或当前 View 端口)中。

我这样设置是因为我可以在浏览器的一次重流中将所有内容添加到页面。

我担心的是，获得的性能将被重新排列浏览器内容的需要所抵消，即使仅更改了部分页面也是如此。

此外，事件绑定(bind)变得更加复杂。

有什么想法吗？

我应该使用“Shadow DOM”吗？

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

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

Answer 1

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

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

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