FPS drops -[Violation] 'requestAnimationFrame' handler took

[dtkagi]

mapbox-gl-js version

v.3.16.0

Browser and version

Version 142.0.7444.60 (Official Build) (arm64)

Expected behavior

Not having FPS drops

Actual behavior

If you go to your own examples at: https://docs.mapbox.com/mapbox-gl-js/example/clip-layer/ and pan around the FPS drops to 30 on my computer and CPU goes to 100% on all 8 cores (M1 macbook). This is especially visible when you go to codepen example and have it full screen.

73[Violation] 'requestAnimationFrame' handler took <N>ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 52ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 54ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 51ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 51ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 84ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 108ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 102ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 75ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 116ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 82ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 65ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 54ms
worker.ts:440 [Violation] 'requestAnimationFrame' handler took 58ms

Link to the demonstration

No response

Steps to trigger the unexpected behavior

No response

Relevant log output

[ibesora]

Thanks for taking the time to open this issue.
We are constantly working on improving GL JS performance so we take this report seriously.
I'll see if I can reproduce the behaviour you are seeing and try to get a stack trace to see if there's some low-hanging fruit to be pruned