在requestAnimationFrame内部进行mousedragging的拖动有用吗?

Is it useful to make the drag of mousedragging happening inside requestAnimationFrame?

我有一个拖动库,它在每次鼠标移动时移动元素。 众所周知,mousemove 触发非常频繁,因此会强制浏览器重新绘制。 这可以通过在 requestAnimationFrame 中进行实际移动来解决。

做这件事有用吗?它会提高性能并减少绘制事件吗? 有没有我没有想到的问题?

取决于浏览器和用例。

现在 asked by the specs 浏览器对 UI 事件(其中包括鼠标事件)进行阈值处理。

Implementations are encouraged to determine the optimal frequency rate to balance responsiveness with performance.

Chrome 和 Firefox 这样做,仅在屏幕刷新率时触发这些事件,就在 requestAniamtionFrame 回调触发之前。
所以在这些浏览器中,这样做你不会有任何收获,但也不会损失太多。

Safari 仍然会触发与设备发出的事件一样多的事件,因此在此浏览器中,您将通过保持自己的阈值来取胜。

(请注意,如果您想释放这个门槛,您将 )


现在,这有助于避免无用地计算将被下一次调用丢弃的东西它可以被绘制之前。
painting will always be throttled to the refresh rate of your screen (just after the requestAnimationFrame callbacks火了)。
因此,由您决定是否要应用该阈值。
例如,尽可能快地更新点列表是有意义的,但要等待 requestAnimationFrame 回调实际进行 DOM 更改或绘制任何内容。

从你对你的案例所说的很少,看来你确实可以通过等待 requestAnimationFrame 回调来获胜,只是因为你可能正在修改你的 CSSOM 的盒子模型.