cahilfoley / react-snowfall

A high performance, canvas based react component that creates a snowfall effect
https://cahilfoley.github.io/react-snowfall/
MIT License
381 stars 21 forks source link

[Perf] Use single path for all non-image snowflakes; use for..of loops over forEach; store Math.PI * 2 as a constant #71

Closed Tetramputechture closed 1 week ago

Tetramputechture commented 8 months ago

This branch introduces one major and two minor performance improvements:

  1. Use one Path for each call render() call, instead of creating new Paths for each circular snowflake. This necessitated a slight refactor, which separates the image-based and path-based drawing routines into separate methods. The check for snowflake image presence is now only done once per render call, instead of once per snowflake. This should provide the most significant improvement on lower-end hardware and in cases with a large number of snowflakes.
  2. Use for..of loops instead of forEach when updating snowflakes position and rendering them. I referred to the benchmark here.
  3. Store Math.PI * 2 as a constant only calculated once per build. This avoids rerunning this multiplication every time we render a snowflake.

I'm working on supplying quantitative benchmark results, but I'm not sure of a good way to present that; if anyone has any ideas I'd love to hear them out to help get this merged!