我應該在我的Javascript遊戲引擎中使用DOM片段作爲Shadow dom嗎？

Question

我正在通過Engine1的名稱爲Web創建一個新的遊戲引擎。我目前製作了一對夫婦的原型。到目前爲止，我已能夠：

1. 使用畫布映射精靈的透明像素。
2. 將事件綁定到精靈的不透明像素。
3. 使用設置的fps開發遊戲運行時。
4. 在變幀定時處動畫精靈。
5. 動畫元素的運動，既
   1. 幀名利
   2. ，並與基於幀補間動畫

我很高興我的進步，但我似乎是進一步推進無難受諮詢DOM性能方面的專家。

當前當一個元素被創建時，它附加到一個DOM片段上我稱之爲「Shadow DOM」。每一幀這個「Shadow DOM」的HTML都被複制並插入到頁面主體（或當前視圖端口）中。

我已經設置了這種方式，因爲我可以在瀏覽器的一次重新流動中將所有內容添加到頁面中。

我擔心的是，即使只改變了頁面的某些部分，瀏覽器內容的重新流動也會抵消所獲得的性能。

此外，事件綁定變得複雜得多。

有什麼想法？

我應該使用「Shadow DOM」嗎？

是否有更好的方法來呈現大量的元素？

有沒有辦法將差異從「Shadow DOM」複製到瀏覽器正文？

Answer 1

更換大塊的DOM可能會很昂貴。一般來說，DOM是發生瓶頸的地方。跟蹤你正在修改的DOM的哪些部分並更新它們會更好。你可以在一個單獨的數據結構中做到這一點，在更新時轉換成DOM，或者像你說的那樣使用陰影DOM。如果這些更改單獨較大，那麼使用陰影DOM可能是一個好主意。如果它們很小（比如只更新文本值），那麼使用單獨的數據結構會更有意義。

無論哪種情況，您都需要第三個對象來跟蹤更改。我很早以前寫過Cactus Templates。您可以使用它將DOM結構與允許更新從任一側傳播到另一側的域對象綁定在一起。它自動將事件附加到指定的位置（域中的鍵值路徑和DOM中的html類名）。它可能也可能不是你正在尋找的東西，但也許你可以從中得到一些想法。