我正在使用ReactJS编写一个允许用户拖动对象的基本HTML5 Canvas组件。我正在为每个对象设置一个带有{left,top}的内联样式,以便在父容器中将其绝对定位。问题是当我拖动对象时,移动事件的触发速度非常快,以至于在每个对象上设置样式需要的时间太长而且存在明显的滞后。
我运行了Chrome分析器并设置样式比我程序中的其他所有操作花费的时间多得多。我想知道在性能方面是否有更好的绝对位置元素。
答案 0 :(得分:0)
问题是当我拖动/移动对象时,移动事件的触发速度非常快,以至于在每个对象上设置样式所需的时间太长而且移动存在明显滞后。
使用油门来过于频繁地优化移动事件,如以下问题所示:
React.js throttle mousemove event keep throwing event.persist() error
使用一系列可以切换而不是内联样式的类名,如下面的答案所示:
https://stackoverflow.com/a/34727020/1113772
或通过CSSOM在样式表中编辑单个类,如下面的答案所示: