search

MLH-Fellowship / scheduling-profiler-prototype

Custom profiler prototype for React's concurrent mode
https://react-scheduling-profiler.vercel.app/
6 stars 0 forks source link

Improve Firefox scrolling performance #114

Closed taneliang closed 4 years ago

taneliang commented 4 years ago

Resolves #105 with 2 strategies

  1. Close paths before clipping. In Firefox, the clip method took a very long time to run as the rects seem to build up over time. Wrapping the rect call in beginPath and closePath seems to reduce the amount of work that clip does. Scroll performance in Firefox is back to normal (~20-30 FPS)

    Before (https://share.firefox.dev/3iaqE5W): image

    After (https://share.firefox.dev/39UvDET): image

  2. Cache canvas bounding rect if the canvas size does not change.

    Correctness: This implementation remains correct because our canvas takes up the whole page, and any change in the actual bounding rect will always result in a canvas width/height change, triggering cache invalidation.

    Improvement: This does not result in any noticeable improvement, but getBoundingClientRect was significant enough to show up in performance profiles. image

vercel[bot] commented 4 years ago

This pull request is being automatically deployed with Vercel (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mlh-fellowship/scheduling-profiler-prototype/cfigsf61x ✅ Preview: https://scheduling-profiler-prototype-git-eliang-ff-scroll.mlh-fellowship.vercel.app