This is a rather broad question of a strange performance issue where frame takes 1200 ms to paint, but devtools profiling shows that browser is almost idle (at least no busier than in normal conditions).

Web app that is affected by this issue has a primary purpose of showing video stream along with some added overlays. To add overlays correctly (e.g. highlight moving objects) they should be in sync with main video stream. For this purpose stream includes additional 32-px strip (which is hidden from human eye by CSS) with color rectangles encoding timestamp of current frame. JavaScript then reads that strip (by drawing a video into canvas and then retrieving image data from that canvas), decodes a frame number, fetches required metadata and then paints everthing on the canvas. This process repeats run in animation frame callback. So, the main loop, when expressed in pseudocode, looks like that:

function readFrameNumber() {
  fnCanvas.drawImage(video, sx, sy, sw, sh, 0, 0, 8, 1);
  const data = fnCanvas.getImageData(0, 0, 8, 1).data;
  return ... // decode pixels in data
}

function animationFrameCb() {
  requestAnimationFrame(animationFrameCb);

  if (video.time != lastTime) {
    const frameNumber = readFrameNumber();
    lastTime = video.time;
    
    const metadata = metadataMap.get(frameNumber);
    canvas.clear();
    for (const obj of metadata.objects) drawObject(obj);
  }
}

requestAnimationFrame(animationFrameCb);

Now, the performance issue itself. If you look at the profiler, you will sometimes see frames like that (along with corresponding UI freezes):

And I'm really confused what is the cause of such freezes:

• it's not CPU: there is a lot of idle time in JavaScript thread
• it's not GPU either: it's also rather idle
• it's not GC: heap chart shows that no garbage collection takes place during the freeze, and there are no abrupt drops in memory usage chart.
• and what is more interesting - it has multiple animation frame callbacks inside of a single frozen frame! All those small yellow ticks on the screenshot are actually invocations of animation frame callback.

Something very weird is happening inside of the Chrome itself, and I'm even don't know where to look for the further insights. This effect is reproducible at least on Linux desktops, and to the lesser extent on Android phones (it has shorter freeze times, but still noticeable).