是否有绝对定位 HTML 元素的 css 样式的替代方法？答案

【问题标题】：Is there an alternative to css styles for absolute positioning HTML elements?是否有绝对定位 HTML 元素的 css 样式的替代方法？
【发布时间】：2016-06-27 04:44:15
【问题描述】：

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

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

【问题讨论】：

可以的话贴出相关代码。它可能有一些低效的地方，只有一双新的眼睛才能看到。
不要使用top和left，使用transform: translate(x, y)更快，因为它使用了gpu blogs.adobe.com/webplatform/2014/03/18/…
不，问题不在于 CPU 性能。问题是设置样式真的很慢。我想知道是否有办法在不设置样式的情况下更改绝对位置。我考虑过在元素上使用数据属性来执行类似 { left: attr('data-x'); } 但这不起作用。

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

【解决方案1】：

问题是当我拖动/移动对象时，移动事件触发得太快，以至于在每个对象上设置样式都需要很长时间，并且移动会有很大的延迟。

使用节流阀来优化移动事件触发过于频繁，如以下问题：

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

【讨论】：