Exporter (0) Imprimer
Développer tout

Visibilité de la page

Remarque  L’API de visibilité peut ne pas fonctionner correctement pour les applications du Windows Store qui utilisent JavaScript dans Windows 8.

Internet Explorer 10 prend désormais en charge l’API de visibilité de page qui permet aux développeurs d’utiliser des techniques de programmation pour déterminer la visibilité actuelle d’un document et d’être avertis quand la visibilité change. S’il ne connaît pas l’état de visibilité d’une page, un développeur Web doit créer la page Web en supposant qu’elle est toujours visible. Cela entraîne une utilisation accrue des ressources de l’ordinateur et empêche les développeurs Web de prendre des décisions au moment de l’exécution selon que la page Web est visible ou non par l’utilisateur.

API de visibilité de la page

Le fait de connaître la visibilité de la page lors de la conception de pages Web améliore l’expérience utilisateur et permet de réduire la consommation d’énergie des sites. L’API de visibilité de la page rend cela possible. Elle est constituée des deux propriétés suivantes.

PropriétéDescription

document.hidden

Une valeur booléenne qui décrit si la page est visible ou non.

document.visibilityState

Retourne l’état de visibilité de la page. Les valeurs possibles sont PAGE_VISIBLE, PAGE_PREVIEW, etc.

 

L’API de visibilité de la page expose également l’événement suivant.

ÉvénementDescription

visibilitychange

Un événement qui est déclenché à chaque fois que l’état de visibilité de la page change.

 

À l’aide de cette API, les applications Web peuvent modifier leur comportement selon si elles sont visibles à l’utilisateur ou non. Cette API permet de réduire le traitement des tâches lorsque la page n’est plus visible. Par exemple, si un client de messagerie Web est visible, il peut vérifier la messagerie sur le serveur toutes les secondes. Lorsqu’il est masqué, il peut vérifier la messagerie toutes les minutes au lieu de toutes les secondes. Cette API offre également plus d’efficacité dans les situations non liées à la gestion de l’énergie. Par exemple, un puzzle peut être interrompu lorsqu’il n’est plus visible. De même, les publicitaires peuvent l’utiliser pour que leurs annonces ne soient pas facturées lorsqu’elles ne sont pas visibles aux utilisateurs.

Exemples de code

L’exemple JavaScript suivant montre une technique de vérification de la messagerie sans savoir si la page est visible ou non. Le code vérifiera la messagerie toutes les secondes même si l’utilisateur ne consulte pas activement la page, car elle n’est pas visible. Cet exemple montre une mauvaise gestion des ressources.


<!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>


La visibilité de la page peut améliorer la gestion des ressources, car elle permet de vérifier la messagerie moins fréquemment lorsque la page n’est pas visible. Le code suivant montre une technique d’utilisation de la visibilité de la page pour vérifier la messagerie toutes les secondes lorsque la page est visible et toutes les minutes lorsqu’elle ne l’est pas.


<!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>


Informations de référence sur les API

hidden
visibilitychange
visibilityState

Démonstrations du site Internet Explorer Test Drive

Page Visibility API

Billets IEBlog

Performances Web W3C : Poursuite des investissements dans les performances
Les API Web Performance accèdent rapidement au statut « Candidate Recommendation » du W3C
Revue de l’année : Groupe de travail W3C Web Performance
Utilisation plus efficace du matériel de PC dans HTML5 : nouvelles API de performance Web, Deuxième partie

Spécification

Page Visibility

 

 

Afficher:
© 2014 Microsoft