Comfy-Org / Comfy-Org/ComfyUI_frontend

Optimize CurveEditor drag performance with requestAnimationFrame batching

Open
#9,114 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Performance Optimization

The current implementation in `useCurveEditor` updates `modelValue` on every `pointermove` event during drag interactions. On high-polling devices, this can trigger Vue recomputes many times per frame, impacting performance.

## Suggested Approach

Use requestAnimationFrame batching to throttle updates:
- Store the latest pointer position in local variables
- Schedule an animation frame callback if none is pending
- Apply the update once per frame in the RAF callback

This batching pattern typically provides significant performance improvements for drag-based UI interactions.

## References

- Original suggestion: https://github.com/Comfy-Org/ComfyUI_frontend/pull/8860#discussion_r2838897982
- PR #8860: https://github.com/Comfy-Org/ComfyUI_frontend/pull/8860
- Requested by: @christian-byrne

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9114-Optimize-CurveEditor-drag-performance-with-requestAnimationFrame-batching-3106d73d3650810e9edccc76912c5efe) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.