Visibilidade da página

Observação  No momento, a API de visibilidade da página talvez não funcione com aplicativos da Windows Store em JavaScript no Windows 8.

O Internet Explorer 10 introduziu suporte à API de visibilidade da página, que fornece um meio de os desenvolvedores usarem técnicas de programação para determinar a visibilidade atual de um documento e serem notificados quando a visibilidade mudar. Sem conhecer o estado de visibilidade de uma página, um desenvolvedor da Web deve criar a página da Web considerando que ela esteja sempre visível. Isso resulta em maior utilização dos recursos do computador e impede que os desenvolvedores da Web tomem decisões em tempo de execução com base na página da Web estar ou não visível para o usuário.

A API de Visibilidade da Página

Conhecer a visibilidade da página ao criar páginas da Web permitirá melhores experiências do usuário e sites eficientes avançados. A API de Visibilidade da Página torna isso possível. Ela consiste das duas propriedades a seguir.

PropriedadeDescrição

document.hidden

Um valor booliano que descreve se a página está ou não visível.

document.visibilityState

Retorna o estado de visibilidade da página. Os valores incluem PAGE_VISIBLE, PAGE_PREVIEW e assim por diante.

 

A API de visibilidade da página também expõe o evento a seguir.

EventoDescrição

visibilitychange

Um evento que dispara a qualquer momento o estado de visibilidade das mudanças de página.

 

Ao usar essa API, os aplicativos da Web podem optar por alterar o comportamento com base em se eles são visíveis ou não para o usuário. Esta API pode ser usada para estreitar o trabalho quando a página não está mais visível. Por exemplo, se um cliente de e-mail baseado na Web estiver visível, ele poderá verificar no servidor uma nova correspondência a cada poucos segundos. Quando oculto, é possível estreitar para verificar o e-mail a cada poucos minutos, em vez de segundos. Essa API também pode ser usada para fornecer uma experiência de usuário mais eficaz em situações não relacionadas com a gestão de energia. Por exemplo, um jogo de quebra-cabeças poderia ser pausado quando o usuário não possuir mais visibilidade do jogo. Da mesma forma, os anunciantes poderiam usá-lo para não cobrar pelos anúncios quando eles não estão visíveis ao público.

Exemplos de código

O exemplo de JavaScript a seguir demonstra uma técnica para a verificação de e-mail sem saber se a página é visível ou não. O código irá sempre verificar o e-mail a cada segundo, mesmo se o usuário não estiver ativamente exibindo a página porque ela não está visível. Este é um exemplo de má gestão de recursos.


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD = 1000;   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


A visibilidade de página pode melhorar o gerenciamento de recursos porque ele pode verificar e-mails com menos frequência quando a página não está visível. O código a seguir mostra uma técnica para usar visibilidade de página que verifica se há novos e-mails a cada segundo quando a página está visível e cada minuto quando ela não está.


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;
   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }  
   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }  
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


Referência de API

hidden
visibilitychange
visibilityState

Demonstrações do Test Drive do Internet Explorer

API de visibilidade da página

Postagens no blog do IE

Desempenho da Web do W3C: continuando os investimentos em desempenho
APIs de desempenho da Web rapidamente se tornam recomendações candidatas do W3C
O ano em revisão: grupo de trabalho de desempenho da Web do W3C
Usando o hardware do computador de forma mais eficiente no HTML5: novas APIs de desempenho da Web, parte 2

Especificação

Visibilidade da página

 

 

Mostrar:
© 2014 Microsoft