Long Delay for requestanimationframe

Wondering if any javascript ninja might be able to offer any insight into what is happening in our project. We are only seeing this issue on Windows Chrome and Edge browser (presumably Chromium on Windows causing it). We run a frame that does some expensive calculations (~75ms, we can improve the performance on this frame and it is not a concern) and it triggers some 3rd part libraries that need to make web some web requests. What we typically observe is we then get 0-2 normal 60fps frames after this frame. But after that we get a very long delay before the next requestanimationframe(Animation frame fired). In the profiler image attached, we get a 207ms delay, but of that delay only 9ms of it appears to be work.

We’ve confirmed our renderloop is complete and not waiting on anything while this happened. I presume these are all tasks in the queue from various setTimeouts in the library or elsewhere in the app, but not sure why they cause so much seemingly idle time, and prevent the next animation frame from firing. Maybe its because it needs to wait for vsync while no task is running?

Any ideas for the cause or what we might do to try and prevent it?

can you capture all the profile (like gpu, and other threads?) Something is actively blocking your browser to send a new RAF

We are trying to get more proficient in some of the Chrome profiling tools. Any advice for what type of capture we should be looking for to zero in on it or which tool helps the most? Here are a few snapshots from the chrome://tracing tool tracing rendering. You can definitely see the delay.

We are starting to zero in on thinking it is something to do with Chromium and Nvidia’s. That long running task on the GPU is:
src_file : “…/…/media/gpu/ipc/service/vda_video_decoder.cc”
src_func: “DestroyAsync”

And the processes we trigger right before hand have do do with destroying video elements in the dom that we were using to bring in as Video Textures.

yes this is definitely outside of js scope for sure!