Investigate why homepage is slow on firefox on linux

[eh-am]

The homepage is incredible slow on firefox.

Initially I assumed it was a problem with an extension, but @abeaumont confirmed it also happens on his computer. He also said CPU usage goes to 100%, he thinks must be something with video rendering.

[petethepig]

or might be the cloud rendering at the bottom of the page

[abeaumont]

I have checked and @petethepig is right, the problem seems to be with the canvas rendering in the cloud section. Removing https://github.com/pyroscope-io/docs/blob/main/src/pages/index.js#L274 makes the problem disappear.

[eh-am]

I had a look at this some time ago, here's my brain dump (before GC kicks in and I completely forget these):

• these setInterval for the typing effect don't help. Plus it's slightly annoying from user perspective
• the cloud rendering is indeed slow
  • the code can be optimized a bit, but nothing that makes THE difference
  • it looks like we render into many canvas (one per puff)

    docs/src/utils/clouds.js

    Line 79 in 7b1d42a

    this.ctx.drawImage(this.puff.img, cX + this.points[i][0], cY + this.points[i][1]);

  • and then we render that against the real canvas

    docs/src/utils/clouds.js

    Line 135 in 7b1d42a

    context.drawImage(clouds[i].img, clouds[i].x - clouds[i].img.width / 2, clouds[i].y - clouds[i].img.height / 2);

  • from what I've seen, rendering off a canvas into another canvas seems to be slow, don't know exactly why (I assume it involves certain lower level optimizations that firefox get it wrong)

One thing we could do that is somewhat "good enough" is rendering a single cloud and don't move it.
Except that it's still gonna be slow when you just load the page. So I still recommend having a look on how to optimize this further.