Identificación: Estoy buscando todas las soluciones posibles para detectar cuándo dejan de suceder los FPS o los repintados / reflujos en un navegador debido a que el navegador optimiza el rendimiento porque un área del documento está fuera de la vista.

Observación: Hasta ahora, la mayoría de las soluciones HTML / JS nativas que he investigado no tienen en cuenta la parte del DOM, que ha sido ocultada por otras partes de la página, o el DOM que está debajo del pliegue. Aunque a veces el contenido se incrusta directamente en el documento principal, otras veces puede estar en un marco o iframe.

Resultados de la prueba: mozPaintCount es una representación precisa de los reflujos de dom para una ventana y responde correctamente cuando se oculta una ventana o un documento en un marco. También parece que Firefox está identificando correctamente las partes del dominio y no las está volviendo a pintar cuando están ocultas, lo que puede comprobarse visualmente a través de la herramienta del inspector de Firefox cuando algo está fuera de la vista. Sin embargo, el inspector no puede tener en cuenta la jerarquía de vistas al dibujar. Los aspectos más destacados en las regiones repintadas. Felicitaciones a ti, Mozilla!

Referencia:mozPaintCount

Flash también muestra una desaceleración en FPS cuando está fuera de la pantalla y el más recienteFlash Player 11.2 tiene un evento dedicado que se activa cuando el navegador lo ha acelerado por motivos de optimización. Flash tampoco es una solución confiable porque está deshabilitado de forma predeterminada en varios navegadores.

Referencia:Flash Player 11.2 Acelerador

La implementación actual del evento de cambio de visibilidad de la página es capaz de transmitir cuando la ventana se ha cambiado a otra pestaña o la ventana se vuelve inactiva, pero no tiene en cuenta la posición de desplazamiento para elementos / ventanas / documentos debajo de la tapa u oculta por otros dom. Sin embargo, en el segundo borrador de esta especificación, se ha propuesto que el navegador tenga en cuenta la ventana gráfica y la jerarquía DOM para obtener resultados más precisos.

Referencias:Recomendación de la página Visibilidad, 2011 yBorrador de la página de visibilidad 2, 2013

Las transiciones CSS no parecen estar optimizadas cuando sus elementos están ocultos, por lo que no pueden medirse correctamente. Probé varias propiedades diferentes que causan reflujos (altura, anchura, sombra de cuadro, etc.) y no pude obtener ninguna métrica significativa de éstas.

requestAnimationFrame parece limitar las animaciones solo cuando se cambia la pestaña y la ventana del navegador se ve borrosa, pero no maneja el contenido debajo del pliegue. Además, debido a que raf solo se adjunta en el nivel de la ventana, no se puede vincular a nodos dom específicos (lo que parece ser miope en su implementación).

Referencia:requestAnimationFrame

No he terminado de probar WebGL, sin embargo, esto se limitará a una pequeña cantidad de navegadores modernos (un resultado aceptable dado a las soluciones flash para navegadores más antiguos).

No he terminado de probar el lienzo, pero esta podría ser una buena solución ya que es compatible con una gama más amplia de navegadores que WebGL.

Ni siquiera he empezado a pensar en objetos incrustados y en lo que podrían proporcionar.

No he examinado los controles ActiveX para ver si hay algo que pueda ayudar.

No he mirado en video HTML5.

Los GIF animados parecen estar optimizados solo para Firefox. Felicitaciones otra vez, Mozilla!

Por lo tanto, el misterio y la magia de cómo cada proveedor de navegador optimiza la representación de la página continúa ahogando mi progreso. Sin embargo, la posición del elemento por sí sola no se puede confiar en una verdadera indicación de si un elemento es realmente visible o no, ya que la página puede tener otras capas que ocultan el contenido enmarcado, o el contenido se puede mostrar de una manera que excluya cualquier representación visible significativa ( como cambiar la rotación 3d del contenido para que no sea visible.)

Cualquier sugerencia sobre cómo los navegadores realmente optimizan el contenido visualizado o direcciones adicionales o respuestas reales a esta pregunta son bienvenidas.

Similar,Aquí hay una pregunta más antigua de SO que parcialmente abarca esta pregunta también.