search

slaylines / canvas-engines-comparison

Performance comparison of different canvas rendering engines.
https://benchmarks.slaylines.io
MIT License
786 stars 84 forks source link

FPSMeter is causing main thread activity #70

Open bramus opened 10 months ago

bramus commented 10 months ago

The FPS Meter widget is updated via rAF. While not a problem in itself, this is causing issues for WAAPI/CSS animations in some browsers (see https://github.com/slaylines/canvas-engines-comparison/issues/69 for these tests).

In Blink (Chromium), the presence of a rAF will cause the animations – which already happened on the compositor – to also happen on the main thread because you could query for style values inside the rAF. Because of this, WAAPI/CSS animations perform worse when the FPS Meter is present.

See https://bramus.github.io/canvas-engines-comparison/dom-waapi.html for an implementation that allows disabling the FPS Meter widget.

bramus commented 10 months ago

For comparison, here’s a performance profile measured in Safari to show the difference.

With FPS Meter Without FPS Meter
Screenshot 2024-01-25 at 16 24 03 Screenshot 2024-01-25 at 16 23 48

(Note that the 9fps in the one screenshot isn’t representative. It’s the ongoing profiling that is slowing things down. When not profiling, the reported number is around 49fps on my machine)