Preact: Add demos for performance comparisons

[marvinhagemeister]

We have more and more PRs where we need to do a performance review (example: #1135 ). Besides just measuring numbers I'd love to add some real world demos, where we can verify the responsiveness similar to react's triangle fiber demo. This would also be beneficial when playing around with async rendering when we'll make changes to our internals.

Possible candidates:

• https://codepen.io/developit/full/xGoagz
• https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html
• https://preact-factals.surge.sh/

[developit]

I have a preact copy of that fiber demo somewhere

[mkxml]

In the first codepen demo, when selecting setImmediate or Promise timing options my Chrome tab just hangs.

[developit]

@mkxml yeah, I should really update that one - it relies on a componentDidUpdate() -> setState() loop, which is no longer a supported way to animate things in Preact as of version 8.

[gaearon]

To be clear — the Fiber demo has been broken for over a year because it lacks the crucial "resuming" feature (which is something we still need to add). Without resuming, the Fiber triangle demo makes no sense. Most people who've seen the demo unfortunately misunderstand what it's supposed to be demoing (that's our fault).

[gaearon]

Crucially the point of the triangle demo isn't to demo "performance", it's to show that there's separate scheduling for high priority and low priority updates, and that we can "rebase" the low priority reconciliation on top of a high priority update. It's nothing Preact would be able to do anyway without implementing a double buffer like in Fiber (and then resuming — which we are still missing).

[developit]

Yup, the thing being demo'd there is actually a good summary of what is out-of-scope for Preact.