对于绝对定位HTML元素,是否有替代css样式的替代方法?

时间:2016-03-11 19:48:02

标签: performance reactjs html5-canvas drag inline-styles

我正在使用ReactJS编写一个允许用户拖动对象的基本HTML5 Canvas组件。我正在为每个对象设置一个带有{left,top}的内联样式,以便在父容器中将其绝对定位。问题是当我拖动对象时,移动事件的触发速度非常快,以至于在每个对象上设置样式需要的时间太长而且存在明显的滞后。

我运行了Chrome分析器并设置样式比我程序中的其他所有操作花费的时间多得多。我想知道在性能方面是否有更好的绝对位置元素。

1 个答案:

答案 0 :(得分:0)

  

问题是当我拖动/移动对象时,移动事件的触发速度非常快,以至于在每个对象上设置样式所需的时间太长而且移动存在明显滞后。

使用油门来过于频繁地优化移动事件,如以下问题所示:

React.js throttle mousemove event keep throwing event.persist() error

Make moving Rect more smooth

使用一系列可以切换而不是内联样式的类名,如下面的答案所示:

https://stackoverflow.com/a/34727020/1113772

或通过CSSOM在样式表中编辑单个类,如下面的答案所示:

https://stackoverflow.com/a/20390265/1113772