(0) exportieren Drucken
Alle erweitern

Seitensichtbarkeit

Hinweis  Die Sichtbarkeits-API funktioniert für Windows Store-Apps mit JavaScript unter Windows 8 möglicherweise nicht korrekt.

Internet Explorer 10 unterstützt die Seitensichtbarkeits-API, mit der Entwickler Programmierungstechniken verwenden können, um die aktuelle Sichtbarkeit eines Dokuments zu bestimmen und über Änderungen der Sichtbarkeit benachrichtigt zu werden. Ohne den Sichtbarkeitsstatus einer Seite zu kennen, muss ein Webentwickler die Webseite unter der Annahme gestalten, dass sie immer sichtbar ist. Dies führt zu höherer Ressourcennutzung und hindert Webentwickler daran, während der Laufzeit Entscheidungen auf Grundlage der Sichtbarkeit der Webseite für den Benutzer zu treffen.

Die Seitensichtbarkeits-API

Die Kenntnis der Seitensichtbarkeit beim Gestalten von Webseiten ermöglicht eine bessere Benutzererfahrung und stromsparende Websites. Dies ermöglicht die Seitensichtbarkeits-API. Sie besteht aus den folgenden beiden Eigenschaften.

EigenschaftBeschreibung

document.hidden

Ein boolescher Wert, der beschreibt, ob die Seite sichtbar ist.

document.visibilityState

Gibt den Status der Seitensichtbarkeit zurück. Zu den Werten zählen folgende: PAGE_VISIBLE, PAGE_PREVIEW usw.

 

Die Seitensichtbarkeits-API zeigt zudem folgendes Ereignis an.

EreignisBeschreibung

visibilitychange

Ein Ereignis, das ausgelöst wird, wenn sich der Sichtbarkeitsstatus der Seite ändert.

 

Mithilfe dieser API können Webanwendungen das Verhalten abhängig davon, ob sie für den Benutzer sichtbar sind, ändern. Diese API kann verwendet werden, um die Arbeitslast zu reduzieren, wenn die Seite nicht mehr sichtbar ist. Wenn beispielsweise ein webbasierter E-Mail-Client sichtbar ist, kann er alle paar Sekunden prüfen, ob auf dem Server neue E-Mails vorhanden sind. Wenn er ausgeblendet ist, kann er sich zurücknehmen und nicht mehr alle paar Sekunden, sondern nur noch alle paar Minuten prüfen, ob E-Mails vorhanden sind. Diese API kann auch verwendet werden, um eine effizientere Benutzerführung in Situationen außerhalb der Energieverwaltung zu ermöglichen. Ein Puzzlespiel kann beispielsweise angehalten werden, wenn das Spiel für den Benutzer nicht mehr sichtbar ist. Ähnlich können Inserenten die API verwenden, um Anzeigen nicht zu berechnen, wenn sie für den Betrachter nicht sichtbar sind.

Codebeispiele

Das folgende JavaScript-Beispiel zeigt eine Technik zum Prüfen, ob E-Mails vorhanden sind, ohne zu wissen, ob die Seite sichtbar ist. Der Code prüft einmal pro Sekunde, ob E-Mails vorhanden sind, auch wenn der Benutzer die Seite nicht aktiv betrachtet, weil sie nicht sichtbar ist. Dies ist ein Beispiel für eine schlechte Ressourcenverwaltung.


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


Mithilfe der Seitensichtbarkeit kann die Ressourcenverwaltung verbessert werden, da damit seltener geprüft wird, ob E-Mails vorhanden sind, wenn die Seite nicht sichtbar ist. Der folgende Code zeigt eine Technik für die Verwendung der Seitensichtbarkeit, die einmal pro Sekunde prüft, ob E-Mails vorhanden sind, wenn die Seite sichtbar ist, und die einmal pro Minute prüft, ob E-Mails vorhanden sind, wenn die Seite nicht sichtbar ist.


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


API-Referenz

hidden
visibilitychange
visibilityState

Demos für die Internet Explorer-Testversion

Seitensichtbarkeits-API

IEBlog-Beiträge

W3C-Webleistung: Weitere Investitionen in die Leistung
Webleistungs-APIs wurden schnell zu W3C-Empfehlungskandidaten
Das Jahr im Rückblick: W3C-Arbeitsgruppe "Web Performance"
Die PC-Hardware in HTML5 noch effektiver nutzen: neue Webleistungs-APIs, Teil 2

Spezifikation

Seitensichtbarkeit

 

 

Anzeigen:
© 2014 Microsoft