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

问题描述

问 题

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

解决方案

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

这篇关于javascript - js小游戏的优化问题？（频繁添加节点和事件，导致事件无法触发？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！