rough-notation icon indicating copy to clipboard operation
rough-notation copied to clipboard

feat: remove resize debounce, and move to batch system for rerendering

Open BeksOmega opened this issue 7 months ago • 0 comments

Fixes: None I think

  1. Removes the debounce timeout from the resize observer, because I think this can actually be performant enough it doesn't need it. (Another way to think about this is debouncing is forcing jank, if we remove the debounce, then the jank is caused by browser performance rather than a hard-coded implementation)
  2. Moves to a batch rendering system based on requestAnimationFrame so that we're doing all recalculation at once instead of in individual callbacks.
  3. Splits the dom computation from the dom manipulation so that we're not forcing layout calculations.
  4. Optimizes the rendering so that if the element only moved and didn't change size, we just reuse the existing SVG instead of removing it and inserting a new one.

Profiling

Attached two performance profiles (with 4x CPU throttling enabled, as recommended). "resize" is a performance log for actually resizing the buttons the annotations are associated with. "move" is a peformance log for making the buttons move by changing the browser size.

move-profile.json resize-profile.json

Testing

Didn't super thoroughly test this because I wanted to know if it was likely to get merged before I invested more time (since I know it's a big change). Let me know what you think and I can try to find time to hammer it more!

Base branch

I know I'm branched off my other branch atm haha. Just didn't want to duplicate changes and conflict with myself, assuming that other one gets merged.

BeksOmega avatar Aug 09 '25 06:08 BeksOmega