javascript - js小游戏的优化问题？（频繁添加节点和事件，导致事件无法触发？）

Question

游戏中，不停创建DOM节点并为其添加touch事件和css transform、transition，是其从页面底部往上运动，点中了，在为其添加隐藏class，当该节点移出屏幕，再将其删除。这个过程就是这样的。
问题来了DOM节点运动中，为其添加的touch事件很难被触发，经常点中也不触发（感觉点不中），怎么优化？

Answer 1

你自己也说了，频繁添加节点和事件。这两件事在浏览器上都是非常耗时的事。运动中的dom节点点不中是因为js进程被大量的dom操作和事件绑定阻塞了，没空处理touch事件。
1、添加touch事件用事件委托，把事件挂载在父元素上，这样只需要绑定一次就够了。
2、dom节点移出屏幕后不要销毁，隐藏起来就好，要“创建”dom节点时再拿这些dom去用。
3、动画尽量用css去实现。
4、用canvas应该会好一些吧（没评估过）。

Answer 2

如果你依然以大量创建DOM的方法做这个游戏，楼上的Hello_World20他的回答可以提高不少性能，但是相对于canvas，还是没法比的。canvas的动画不需要操作DOM节点，而且可以开启GPU加速，性能很高，渲染很快。而你所描述的这个游戏，用canvas做再合适不过了。