Einführung in die Sichtbarkeits -API

Kernpunkte

• Seite Sichtbarkeits API ermöglicht den Entwicklern der Website, den aktuellen Sichtbarkeitsstatus der Seite zu bestimmen, wodurch leistungsstarke und cpueffiziente Webanwendungen entwickelt werden können, insbesondere für mobile Geräte mit begrenzten Ressourcen.
• Die API enthält ein Ereignis namens "VisibilityChange" und zwei schreibgeschützte Eigenschaften "versteckt" und "Sichtbarkeitstate", die angeben, ob die Seite sichtbar, versteckt, vorgesperrt ist oder kurz davor steht.
• Seite Sichtbarkeits -API wird im Allgemeinen nicht von allen Browsern und Browsern unterstützt, die sie unterstützen, die häufig Anbieterpräfixe verwenden, was zu potenziellen Kompatibilitätsproblemen führt. Sie können Polyfills wie sichtbar.js und isvis.js verwenden, um die Lücke zwischen Browsern zu schließen, die diese API nicht unterstützen.
• Sichtbarkeits -API -Anwendungsfälle umfassen: Pause von Video- oder Audio -Wiedergabe, wenn ein Benutzer die Registerkarte oder Animation gestoppt wird, um CPU und Bandbreite zu speichern.

Mobile Geräte sind cool, mobile Apps sind cooler. Leider sind mobile Verbindungen in den meisten Fällen schlecht, da sie langsam sind oder eine begrenzte Bandbreite aufweisen. Es wäre großartig, eine reichhaltige Webanwendung zu haben, die keine Benutzerressourcen verschwendet, insbesondere wenn der Benutzer die Seite nicht anzeigt. In diesem Artikel wird angezeigt, wie Sie mit der Sichtbarkeits -API von Site diese und andere Probleme teilweise behoben werden. In den letzten Jahren wurden mehrere neue und exzellente APIs vorgestellt, um unsere tägliche Arbeit zu erledigen, wie die Geolokalisierungs-API, die Navigations-Timing-API und die Full-Screen-API. Page-Sichtbarkeits-API [ Definiert eine Methode, mit der Website-Entwickler den aktuellen Sichtbarkeitsstatus einer Seite programmatisch bestimmen können, um leistungsstarke und cpueffiziente Webanwendungen ] zu entwickeln. Seit dem 26. Juli 2012 ist es eine Empfehlung von W3C -Kandidaten geworden und gilt daher als stabil. Das erste, worüber Sie vielleicht neugierig sind, ist, wie sie die Leistung verbessern und Bandbreite retten. Stellen Sie sich vor, Sie haben eine großartige AJAX-basierte Webanwendung, die Daten alle fünf Sekunden hin und her sendet. Wenn der Benutzer das Browser -Tag im Hintergrund sendet, während die Anwendung ausgeführt wird, sendet er weiterhin alle fünf Sekunden Daten und dieselbe ist wahr, wenn der Benutzer das Tag nach 10 Minuten in den Vordergrund stellt. Wäre es nicht schön, wenn die Anwendung das Update verlangsamt oder die Aktualisierung aufhört, bis der Benutzer die Seite erneut überprüft? Hier liegt die Ressourcenoptimierung und die Sichtbarkeits -API der Seite spielt eine Schlüsselrolle.

Zusammensetzung der Sichtbarkeits -API

Diese APIs sind sehr einfach, in der Tat haben sie nur ein Ereignis namens VisibilityChange und zwei schreibgeschützte Eigenschaften, die versteckt und Sichtbarkeitsstaaten des Dokuments gehören. "Hidden" ist ein boolescher Wert, der wahr ist, wenn die Seite nicht sichtbar ist (sogar der kleinste Teil), was normalerweise auftritt, wenn sich das Tag im Hintergrund befindet oder wenn der Browser minimiert wird. Es ist zu beachten, dass diese Regel einige Ausnahmen von Zugänglichkeitstools enthält, die im Vollbildmodus ausgeführt werden. Sie können die versteckte Spezifikation für weitere Informationen lesen. "SichtbarkeitState" ist ein Enum, der den aktuellen Status des Dokuments angibt und die folgenden Werte enthält:

• versteckt: Das Dokument ist völlig unsichtbar
• sichtbar: Das Dokument oder ein Teil davon ist sichtbar
• prerender: Das Dokument lädt außerhalb des Bildschirms und ist nicht sichtbar
• Entladen: Das Dokument steht kurz davor,
zu deinstallieren

Beachten Sie, dass die letzten beiden Werte, die vorgeladen und entladen sind, optional sind. Darüber hinaus gibt es wie das versteckte Attribut einige Ausnahmen von dem verborgenen Wert in der Hilfstechnologie.

Kompatibilität

derzeit gibt es nicht viele Browser, die diese APIs unterstützen, und Browser, die diese APIs unterstützen, verwenden immer noch Anbieterpräfixe. Dies führt zu Supportproblemen, da Sie alle Präfixe verwalten müssen, um einen Arbeitscode zu haben. Derzeit umfassen Desktop -Browser, die die Sichtbarkeits -API der Seiten unterstützen, Chrome 13, Internet Explorer 10, Firefox 10 und Opera Beta 12.10. Zu den mobilen Browsern, die diese API unterstützen, gehören Chrome on Android 4.0 und Opera Mobile 12.1 auf Android und Symbian (Source MobileHTML5.org - ich habe sie selbst auf Android 4.0 getestet). Eine etwas nervige Sache ist, dass aufgrund der Kamelcase -Konvention, wenn das Attribut über einen Anbieter -Präfix verfügt, der tatsächliche Attributname aktiviert wird und wenn es kein Präfix gibt, darunter Kleinbuchstaben. Nehmen wir zur Klarheit das versteckte Eigentum als Beispiel. Sie können sehen, dass es mit Kleinbuchstaben beginnt, aber wenn es ein Präfix hat, beginnt es mit dem Großbuchstaben "H". Um die Unterstützung zu testen, können Sie keinen Code schreiben, ähnlich wie folgt:

var browserPrefixes = ["", "webkit","moz","ms","o"];
for(var i = 0; i < browserPrefixes.length; i++) {
  if (document[browserPrefixes[i] + "hidden"] != undefined) {
    // here goes the code
    break;
  }
}

Sie müssen den Fall wie unten gezeigt teilen oder einige Tricks für Zeichenfolgen verwenden.

// Testen Sie nicht fixierte Versionen if (document.hidden! == undefiniert) // Code hier hinzufügen anders { // Testen Sie die vorangestellte Version var browserprefixes = ["webkit", "moz", "ms", "o"]; für (var i = 0; i & lt; browserprefixes.length; i) { if (document [browserprefixes [i] "versteckt"]! == undefined) { // Code hier hinzufügen brechen; } } }

Wie bei anderen APIs wurde eine Reihe von Polyfills freigegeben, um diese APIs in Browsern zu verwenden, die sie nicht unterstützen. Einige dieser Polyfills sind sichtbar. Js und isvis.js.

(Der folgende Inhalt ist eine Umschreibung der ursprünglichen Code -Snippets und -Albilder, die die Funktion unverändert und die Codestoptimierung und Annotationsverstärkung halten)

(Die langen Code-Beispiele und -erklärungen im Originaltext werden hier weggelassen, da dieser Teil nicht mit dem Pseudo-Ursprungziel übereinstimmt und bei Bedarf zu lang ist. Bei Bedarf kann ein optimiertes Code-Beispiel bereitgestellt werden.)

Schlussfolgerung

Dieser Artikel zeigt die Merkmale der Sichtbarkeits -API der Seite und wie sie verwendet werden. Die Absicht der W3C -Mitarbeiter, mobile Geräte zu helfen (nicht nur, um Ressourcen und Konnektivitätsbandbreite zu sparen), ist wirklich lobenswert und ich hoffe, dass sie bald weit verbreitet sind.

Wie Sie sehen, sind diese APIs sehr einfach, mit nur zwei Eigenschaften und einem Ereignis, sodass Sie sie in wenigen Minuten verwenden können, um Ihre Webanwendung zu verbessern.

derzeit sind sie jedoch nicht sehr zuverlässig, da sie im Browser eine schlechte Unterstützung haben, sodass Sie Polyfill verwenden müssen.

Wenn Sie an JavaScript -APIs interessiert sind, lesen Sie den API -Abschnitt auf den neuesten Websites im SitePoint -Netzwerk… JSPRO.

(Der langwierige FAQ-Teil im Originaltext wird hier weggelassen, da dieser Teil nicht mit dem pseudooriginalen Ziel übereinstimmt und zu lang ist. Bei Bedarf kann ein optimiertes FAQ-Beispiel bereitgestellt werden.)

Das obige ist der detaillierte Inhalt vonEinführung in die Sichtbarkeits -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!