Como posso saber quando o navegador para de repintar camadas / nós DOM porque eles estão ocultos?

Identificação: Estou procurando todas as soluções possíveis para detectar quando o FPS cai ou os repain / reflows param de acontecer em um navegador devido à otimização do desempenho do navegador, porque uma área do documento está fora de vista.

Observação: Até o momento, a maioria das soluções HTML / JS nativas que pesquisei não leva em consideração a parte do DOM, que foi ocultada por outras partes da página, ou o DOM, abaixo da dobra. Embora algumas vezes o conteúdo seja incorporado diretamente no documento pai, outras vezes ele pode estar em um quadro ou iframe.

Resultado dos testes: mozPaintCount é uma representação precisa do dom reflui para uma janela e responde corretamente quando uma janela ou documento em um quadro é obscurecido. Também parece que o Firefox está identificando corretamente partes do dom e não as repintando quando obscurecidas, que podem ser visualmente verificadas através da ferramenta de inspeção do firefox quando algo está fora de vista; no entanto, o inspetor pode não levar em consideração a hierarquia de vistas ao desenhar os destaques nas regiões repintadas. Parabéns a você, Mozilla!

Referência:mozPaintCount

O Flash também mostra uma desaceleração no FPS quando está fora da tela e o mais novoFlash Player 11.2 tem um evento dedicado que é acionado quando é acelerado pelo navegador por motivos de otimização. O Flash também não é uma solução confiável, pois está desativado por padrão em vários navegadores.

Referência:Eventos do acelerador do Flash Player 11.2

A implementação atual do navegador do evento de alteração de visibilidade da página é capaz de transmitir quando a janela foi alterada para outra guia ou a janela se torna inativa, mas não leva em consideração a posição de rolagem de elementos / janelas / documentos abaixo da dobra ou ocultada por outras dom. No segundo rascunho desta especificação, no entanto, foi proposto que o navegador levasse em consideração a janela de visualização e a hierarquia do DOM para fornecer resultados mais precisos.

Referências:Visibilidade da página de recomendação, 2011 eVisibilidade da página de rascunho 2, 2013

As transições CSS não parecem ser otimizadas quando seus elementos são obscurecidos e, portanto, não podem ser medidos corretamente. Tentei várias propriedades diferentes que causam refluxos (altura, largura, sombra da caixa etc.) e não consegui obter nenhuma métrica significativa a partir delas.

requestAnimationFrame parece limitar as animações apenas quando a guia é alterada e a janela do navegador fica embaçada, mas não lida com o conteúdo abaixo da dobra. Além disso, como o raf é anexado apenas no nível da janela, ele não pode ser vinculado a nós dom específicos (que parecem ter uma visão míope em sua implementação).

Referência:requestAnimationFrame

Eu não terminei de testar o WebGL, no entanto, isso será limitado a um pequeno número de navegadores modernos (um resultado aceitável, dadas as soluções em flash para navegadores mais antigos).

Eu não terminei de testar a tela, mas essa poderia ser uma boa solução, pois é suportada por uma variedade maior de navegadores que o WebGL.

Eu nem comecei a pensar sobre objetos incorporados e o que eles poderiam fornecer.

Eu não procurei nos controles ActiveX para ver se há algo lá que possa ajudar.

Eu não olhei para o vídeo HTML5.

GIFs animados parecem ser otimizados apenas no Firefox. Parabéns de novo, Mozilla!

Portanto, o mistério e a mágica de como cada fornecedor de navegador otimiza a renderização da página continuam a sufocar o meu progresso. No entanto, não é possível confiar apenas na posição do elemento para uma indicação verdadeira de se um elemento é realmente visível ou não, pois a página pode ter outras camadas que obscurecem o conteúdo emoldurado ou o conteúdo pode ser exibido de uma maneira que impede qualquer renderização significativamente visível ( como alterar a rotação 3D do conteúdo para que não fique visível.)

Qualquer debate sobre como os navegadores realmente otimizam o conteúdo exibido ou instruções adicionais ou respostas reais a esta pergunta é bem-vindo.

Similarmente,aqui está uma pergunta SO mais antiga que abrange parcialmente essa questão também.

questionAnswers(2)

yourAnswerToTheQuestion