Canvas spinning fan
The white noise you hear in this Vine is the sound of my laptop fan whirling away at top speed. This animation is rendered in
<canvas>, in Chrome. While the animation does have thousands of particles being rendered, I hadn’t expected the top-speed fan.
I’ve been able to pinpoint its cause. The animation was using the width of an image,
this.img.width, for every particle, every frame. Setting this value to a separate property
this.imgWidth has slowed down the fan significantly. I speculate that this issue is similar to reflow triggers.
Clearly, debugging via hardware machinations is not a good strategy. I still struggle with making sense of anything in the Chrome Developer Tools around rendering performance — especially for a rendering like this one, involving thousands of particles over thousands of frames.