使鼠标拖曳拖动发生在requestAnimationFrame中是否有用? [英] Is it useful to make the drag of mousedragging happening inside requestAnimationFrame?
问题描述
我有一个拖动库，可在每次mousemove上移动元素.众所周知，mousemove经常触发，因此迫使浏览器重新绘制.这可以通过在requestAnimationFrame中进行实际移动来解决.
I have a dragging library which moves the element on every mousemove. As we all know, mousemove fires quite often and thus forces the browser into repaints. This could be solved, by do the actual moving in requestAnimationFrame.
这有用吗?它会提高性能并减少油漆事件吗?有没有我想到的问题?
Is it a useful thing to do? Will it increase performance and decrease paint events? Are there any issues I didnt think off?
推荐答案
取决于浏览器和用例.
要求规范的浏览器会自行设置阈值UI事件(其中有鼠标事件).
It is now asked by the specs that browsers do threshold themselves UI events (among which the mouse events).
鼓励实施人员确定最佳频率，以在响应速度和性能之间取得平衡.
Implementations are encouraged to determine the optimal frequency rate to balance responsiveness with performance.
Chrome和Firefox会执行此操作，仅在 requestAniamtionFrame 回调触发之前，才以屏幕刷新率触发这些事件.
因此，在这些浏览器中，这样做不会赢得任何好处，但也不会造成太多损失.
Chrome and Firefox do this, firing these events only at screen refresh rate, just before requestAniamtionFrame callbacks fire.
So in these browsers, you won't win anything by doing so, but you won't lose much either.
Safari仍然会触发与设备发出的事件一样多的事件，因此在此浏览器中，您将通过保持自己的阈值而获胜.
Safari still fires as many such events as the device emits, so in this browser you'll win by maintaining your own threshold.
(Note that if you wish to unleash this threshold, you'll need to use pointerevents instead.)
现在，这对于避免无用的计算会被下一个调用之前丢弃的东西有用.
绘画始终会限制到屏幕的刷新率(在
Now, this is useful to avoid uselessly calculating things that will get discarded by next calls before it can get painted.
The painting will always be throttled to the refresh rate of your screen (just after the requestAnimationFrame callbacks fire).
So it's up to you to determine if you wish to apply that threshold or not.
For instance it can make sense to update a list of points as fast as possible, but to wait the requestAnimationFrame callback to actually make DOM changes or draw anything.
从您所说的情况来看，似乎您确实可以通过等待 requestAnimationFrame 回调而获胜，只是因为您可能正在修改CSSOM的框模型.
From the little you said about your case, it seems though that you may indeed win by waiting for requestAnimationFrame callbacks, only because you may be modifying the box model of your CSSOM.
这篇关于使鼠标拖曳拖动发生在requestAnimationFrame中是否有用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
