Baseline Widely available
Die Page Visibility API bietet Ereignisse, die Sie überwachen können, um zu wissen, wann ein Dokument sichtbar oder unsichtbar wird, sowie Funktionen, um den aktuellen Sichtbarkeitsstatus der Seite zu überprüfen.
Dies ist besonders nützlich, um Ressourcen zu sparen und die Leistung zu verbessern, indem eine Seite unnötige Aufgaben vermeidet, wenn das Dokument nicht sichtbar ist.
Konzepte und NutzungWenn der Benutzer das Fenster minimiert, zu einem anderen Tab wechselt oder das Dokument vollständig von einem anderen Fenster verdeckt wird, sendet die API ein visibilitychange-Ereignis, um den Zuhörern mitzuteilen, dass sich der Status der Seite geändert hat. Sie können das Ereignis erkennen und einige Aktionen ausführen oder sich anders verhalten. Zum Beispiel, wenn Ihre Webanwendung ein Video abspielt, kann sie das Video pausieren, wenn der Benutzer den Tab in den Hintergrund legt, und die Wiedergabe fortsetzen, wenn der Benutzer zum Tab zurückkehrt. Der Benutzer verliert nicht seine Position im Video, der Soundtrack des Videos stört keine Audiodateien im neuen Vordergrund-Tab, und der Benutzer verpasst keine Teile des Videos währenddessen.
Die Sichtbarkeitsstatus eines <iframe> sind die gleichen wie das übergeordnete Dokument. Das Verstecken eines <iframe> mit CSS-Eigenschaften (wie zum Beispiel display: none;) löst keine Sichtbarkeitsereignisse aus oder ändert den Status des im Rahmen enthaltenen Dokuments.
Betrachten wir einige Anwendungsfälle für die Page Visibility API.
Historisch haben Entwickler unvollkommene Stellvertreter verwendet, um dies zu erkennen. Beispielsweise helfen Ihnen das Ãberwachen von blur- und focus-Ereignissen auf dem Fenster zu wissen, wann Ihre Seite nicht die aktive Seite ist, aber es sagt Ihnen nicht, dass Ihre Seite für den Benutzer tatsächlich verborgen ist. Die Page Visibility API befasst sich mit diesem Punkt.
Hinweis: Auch wenn onblur und onfocus Ihnen sagen, ob der Benutzer Fenster wechselt, bedeutet das nicht unbedingt, dass es verborgen ist. Seiten werden nur dann versteckt, wenn der Benutzer Tabs wechselt oder das Browserfenster, das den Tab enthält, minimiert.
Unabhängig von der Page Visibility API haben User Agents typischerweise eine Reihe von Richtlinien implementiert, um die Leistungsauswirkungen von Hintergrund- oder versteckten Tabs zu mindern. Diese können umfassen:
Die meisten Browser hören auf, requestAnimationFrame()-Rückrufe an Hintergrund-Tabs oder versteckte <iframe>s zu senden, um die Leistung und die Akkulaufzeit zu verbessern.
Timer wie setTimeout() werden in Hintergrund-/inaktiven Tabs gedrosselt, um die Leistung zu verbessern. Weitere Details finden Sie unter Gründe für längere als angegebene Verzögerungen.
Browser implementieren budgetbasierte Hintergrund-Timeout-Drosselung. Dies funktioniert über moderne Browser hinweg ähnlich, mit folgenden Details:
Einige Prozesse sind von diesem Drosselungsverhalten ausgenommen. In diesen Fällen können Sie die Page Visibility API verwenden, um die Leistungswirkung der Tabs zu reduzieren, während sie verborgen sind.
Die Page Visibility API fügt der Document-Schnittstelle die folgenden Eigenschaften hinzu:
Document.hidden Schreibgeschützt
Gibt true zurück, wenn die Seite in einem für den Benutzer unsichtbaren Zustand ist, und false andernfalls.
Document.visibilityState Schreibgeschützt
Ein String, der den aktuellen Sichtbarkeitsstatus des Dokuments angibt. Mögliche Werte sind:
visible
Der Seiteninhalt ist möglicherweise mindestens teilweise sichtbar. In der Praxis bedeutet dies, dass die Seite der Vordergrund-Tab eines nicht minimierten Fensters ist.
hidden
Der Inhalt der Seite ist für den Benutzer nicht sichtbar, entweder weil der Tab des Dokuments im Hintergrund ist, Teil eines minimierten Fensters ist, oder weil der Bildschirm des Geräts ausgeschaltet ist.
Die Page Visibility API fügt der Document-Schnittstelle die folgenden Ereignisse hinzu:
visibilitychange
Ausgelöst, wenn der Inhalt eines Tabs sichtbar oder verborgen geworden ist.
Dieses Beispiel pausiert die Wiedergabe von Audio, wenn die Seite verborgen ist, und setzt die Wiedergabe fort, wenn die Seite wieder sichtbar wird. Die <audio>-Elementsteuerelemente ermöglichen dem Benutzer, zwischen der Wiedergabe und dem Pausieren von Audio umzuschalten. Der boolesche playingOnHide wird verwendet, um zu verhindern, dass Audio abgespielt wird, wenn die Seite in einen sichtbaren Status wechselt, das Medium jedoch nicht bei Seitenverbergen abgespielt wurde.
<audio
controls
src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>
const audio = document.querySelector("audio");
let playingOnHide = false;
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
playingOnHide = !audio.paused;
audio.pause();
} else {
// Page became visible! Resume playing if audio was "playing on hide"
if (playingOnHide) {
audio.play();
}
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3