Esta es una pregunta bastante amplia de un problema de rendimiento extraño en el que el cuadro tarda 1200 ms en pintarse, pero el perfil de devtools muestra que el navegador está casi inactivo (al menos no más ocupado que en condiciones normales).

La aplicación web que se ve afectada por este problema tiene el objetivo principal de mostrar la transmisión de video junto con algunas superposiciones adicionales. Para agregar superposiciones correctamente (por ejemplo, resaltar objetos en movimiento), deben estar sincronizados con la transmisión de video principal. Para este propósito, la transmisión incluye una tira adicional de 32 px (que está oculta al ojo humano por CSS) con rectángulos de color que codifican la marca de tiempo del cuadro actual. Luego, JavaScript lee esa tira (dibujando un video en el lienzo y luego recuperando los datos de la imagen de ese lienzo), decodifica un número de cuadro, obtiene los metadatos requeridos y luego pinta todo en el lienzo. Este proceso repite la ejecución en la devolución de llamada del cuadro de animación. Entonces, el ciclo principal, cuando se expresa en pseudocódigo, se ve así:

 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);

Ahora, el problema de rendimiento en sí. Si observa el generador de perfiles, a veces verá marcos como ese (junto con las congelaciones de IU correspondientes):

Y estoy realmente confundido cuál es la causa de tales congelamientos:

• no es CPU: hay mucho tiempo de inactividad en el hilo de JavaScript
• tampoco es GPU: también es bastante inactivo
• no es GC: el gráfico de montón muestra que no se realiza recolección de elementos no utilizados durante la congelación, y no hay caídas abruptas en el gráfico de uso de memoria.
• y lo que es más interesante: ¡tiene múltiples devoluciones de llamada de cuadros de animación dentro de un solo cuadro congelado ! Todas esas pequeñas marcas amarillas en la captura de pantalla son en realidad invocaciones de devolución de llamada de cuadro de animación.

Algo muy extraño está sucediendo dentro de Chrome, e incluso no sé dónde buscar más información. Este efecto es reproducible al menos en los escritorios de Linux y, en menor medida, en los teléfonos Android (tiene tiempos de congelación más cortos, pero aún se nota).