Estoy trabajando para mejorar el rendimiento de algunos códigos con uso intensivo de gráficos, y uno de los cuellos de botella es que a veces necesita obtener las dimensiones de un determinado div. La mayoría de las veces esto está bien, pero ocasionalmente se atasca durante ~100 ms esperando que se vuelva a calcular el estilo.
Normalmente, entiendo que debemos esperar a que el estilo se vuelva a calcular para que las dimensiones devueltas sean precisas, pero esto hace que se detenga durante 100 ms en medio de una animación. Estoy de acuerdo con las métricas inexactas o desactualizadas, siempre que pueda obtenerlas rápidamente. No quiero pausar todo para recalcular el estilo.
¿Hay alguna forma de evitar esperar este estilo recalculado?
Para resumir mi caso de uso: estoy realizando animaciones dentro de un lienzo (con PIXI si a alguien le importa). Los elementos dentro del lienzo se organizan en filas que coinciden con las filas HTML fuera del lienzo. Cada vez que se vuelve a dibujar una fila del lienzo, debemos buscar la posición y la altura de la fila HTML externa para calcular la altura y el desplazamiento superior de la fila del lienzo.
Las filas HTML pueden cambiar de posición y altura, por lo que las filas del lienzo deben poder reaccionar ante esto. Sin embargo, incluso cuando las filas HTML no cambian de posición o altura, mi pintura de lienzo puede colgarse durante más de 100 ms esperando que finalice un "recalcular estilo" para que pueda determinar su altura y las compensaciones superiores. Estoy perfectamente feliz si es un poco lento cuando las filas cambian de posición y altura (ya que no debería suceder con demasiada frecuencia), pero no debería estropear todas las animaciones de los contenidos de las filas en esta medida.
EDITAR: solo quiero agregar que se esperan y aprecian soluciones no convencionales, pirateadas o complejas. Entiendo que esta no es necesariamente una pregunta que pueda responderse con una sola línea.
El problema es que incluso si su código no activa estos reflujos, de todos modos se activarán en el próximo repintado.
Por lo tanto, podría evitar activarlos desde su código almacenando en caché los resultados, por ejemplo, desde unResizeObserver , o si apunta a navegadores antiguos simplemente esperando después de la siguiente pintura ( requestAnimationFrame(() => setTimeout(cacheDimensions, 0)); ) , pero dado que usted no es responsable de la eliminación del diseño, siempre tendrá los 100 ms gastados en calcular el nuevo diseño que consumirá su tiempo de animación de todos modos.
100 ms para un recálculo es enorme, por lo que lo invito a descubrir qué en su diseño hace que este recálculo sea tan complejo y encuentre una manera de aislar la capa que necesita actualización.