Verwendung der Netzwerkinformations -API zur Verbesserung der reaktionsschnellen Websites

Key Takeaways

• Die Netzwerkinformations -API kann die Benutzererfahrung auf reaktionsschnellen Websites erheblich verbessern, indem Informationen über die Netzwerkverbindung des Benutzers bereitgestellt werden, einschließlich der Frage, ob sie gemessen wird und eine Schätzung der Bandbreite. Diese Informationen können verwendet werden, um Ressourcen wie Bilder, Videos, Schriftarten usw. bedingt zu laden, um auch bei langsameren oder gemessenen Verbindungen eine optimale Leistung zu gewährleisten.
• Implementierung der Netzwerkinformations -API umfasst die Verwendung von JavaScript, um auf die Eigenschaften und Methoden der API zuzugreifen. Das API-Objekt wird von Navigator.Connection zurückgegeben und bietet zwei schreibgeschützte Eigenschaften: Bandbreite und Messung. Diese Eigenschaften können verwendet werden, um hochauflösende Bilder oder andere große Vermögenswerte basierend auf dem Verbindungsstatus des Benutzers bedingt zu laden.
• Trotz ihrer potenziellen Vorteile verfügt die Netzwerkinformations -API derzeit nur begrenzte Browser -Unterstützung und kann sich ändern. Es lohnt sich jedoch weiterhin für mobilfreundliche Websites oder Anwendungen in Betracht zu ziehen, da es dazu beitragen kann, dass Seiten zu groß und langsam in Mobilfunknetze geladen werden. Wenn sich die API ändert, können Aktualisierungen an der entsprechenden Funktion durchgeführt werden, um sicherzustellen, dass die Website weiterhin angemessen reagiert.

Responsive Webdesign hat das Web revolutioniert. Eine einzelne Site kann ihr Layout anpassen, wenn sie auf einer Reihe unterschiedlicher Geräte und Bildschirme angezeigt werden. Alles, was erforderlich ist, sind einige Medienabfragen, um die Bildschirmgröße zu erkennen und alternative Stile oder Stylesheets zu laden. Die Verwendung der Bildschirmgröße zur Erkennung von Browserfunktionen ist jedoch mit der Geschwindigkeit eines Autos zu beurteilen, indem er das Radio betrachtet. Moderne Smartphones und Tablets haben immer größere Auflösungen und zeigen gerne eine typische Desktop -Ansicht. Wenn diese Ansicht zahlreiche Schriftarten, Bilder oder andere Vermögenswerte hinzufügt, erhält der mobile Benutzer möglicherweise eine degradierte - und teure - Erfahrung, da er sich in einer langsameren oder messenden Verbindung befindet.

Die Netzwerkinformations -API

Die Netzwerkinformations -API kann helfen. Es zeigt an, ob der Benutzer eine gemessene Verbindung hat, wie z. B. Pay-as-you-go, und eine Schätzung der Bandbreite liefert. Mit diesen Informationen können Bilder, Videos, Schriftarten und andere Ressourcen bedingt geladen werden. Auf grundlegender Ebene können Sie eine Medienabfrage außer Kraft setzen, um sicherzustellen, dass das mobile Layout in einem begrenzten Netzwerk aufbewahrt wird.

Browserunterstützung

Trotz der im Jahr 2011 veröffentlichten Netzwerkinformations -API -Entwurfsspezifikation bieten zu diesem Zeitpunkt nur Firefox und Chrome experimentelle Unterstützung. Bis wir einen Anbieter -Konsens haben, kann sich die API ändern:

• Die Bandbreite beurteilen ist schwierig. Es kann sich häufig ändern, wenn Sie sich um Mobil- und Wi-Fi-Netzwerke bewegen oder wechseln. Die Netzwerkkapazität kann gut sein, aber es folgt nicht, dass eine Verbindung zu einem bestimmten Server sein wird. Die Bandbreitenschätzung auf dem neuesten Stand zu halten, kann auch Prozessor und netzwerkintensiv sein.
• Wie kann das Gerät wissen, ob Ihre Verbindung gemessen wird? Sogar schnelles Wi-Fi kann in einigen Hotels und Flughäfen, die ich erwähnen konnte, lächerlich erpresserische Kosten haben. Eine Option wäre, dass das Gerät Sie auffordert, wenn eine neue Verbindung hergestellt wird.

Glücklicherweise können wir die Objekterkennung verwenden, um für das Vorhandensein der API zu erkennen.

API -Grundlagen

Das Netzwerkinformations -API -Objekt wird von Navigator.Connection zurückgegeben. Um die Kompatibilität des Cross-Browsers zu gewährleisten, benötigen wir:

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

Möglicherweise möchten Sie dieser Liste Navigator.msconnection hinzufügen, obwohl der IE normalerweise nicht vorgefertigte APIs implementiert. Unsere Verbindung Das Objekt bietet zwei schreibgeschützte Eigenschaften:

• Bandbreite - Eine doppelte Schätzung der aktuellen Bandbreite in MB/S (Megabyte pro Sekunde). Der Wert ist Null, wenn der Benutzer offline und unendlich ist, wenn er nicht bestimmt werden kann. Hinweis Die meisten Netzwerkanbieter zitieren Werte in Megabit pro Sekunde und eine typische geschäftige mobile 3G -Verbindung beträgt etwa 400 Mbit/s ~ = 400.000 Bit/s ~ = 50 KB/s ~ = 0,05 MB/s.
• METER - Ein Booleschen, der, wenn er wahr ist, die Verbindung des Benutzers Einschränkung und Bandbreitennutzung unterliegt, wenn möglich.

Zum Beispiel:

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

Schließlich können wir einen Änderungsereignishandler ausführen, wenn sich der Verbindungsstatus ändert, z.

<span>// default bandwidth
</span><span>var highBandwidth = false;
</span>
<span>// bandwidth change handler
</span><span>function <span>BandwidthChange</span>() {
</span>highBandwidth <span>= (!connection.metered && connection.bandwidth > 2);
</span><span>console.log(
</span><span>"switching to " +
</span><span>(highBandwidth ? "high" : "low") +
</span><span>" bandwidth mode"
</span><span>);
</span><span>}
</span>
<span>// Network Information object
</span><span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
</span>
<span>// initialize
</span><span>if (connection) {
</span>connection<span>.addEventListener("change", BandwidthChange);
</span><span><span>BandwidthChange</span>();
</span><span>}</span>

In diesem Code wird die Global Highbandwidth -Variable auftreten, wenn eine hohe Bandbreite verfügbar ist. Ein anderer Code könnte entsprechend reagieren, z. Wenn die Hochbandbreite falsch ist:

1. hochauflösende Bilder werden nicht geladen
2. unnötige Schriftarten werden nicht geladen
3. Ajax -Umfragen wird verlangsamt
4. ajax Timeout -Parameter werden erhöht

Um die Dinge ein wenig zu erleichtern, können Sie eine Klasse an das Body -Tag in der Bandbreite anhängen Funktion, z.

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

Dies ermöglicht es uns, Elemente wie Hintergrundbilder in CSS bedingt zu laden, z.

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

Dieser Zustand kann weiterhin in Desktop -Layouts überprüft werden, die von Medienabfragen geladen werden.

Sollten Sie die Netzwerkinformations -API verwenden?

Zum Zeitpunkt des Schreibens bietet die Netzwerkinformations -API nur wenig Browser -Unterstützung und könnte sich ändern. Wenn Sie jedoch eine Website oder Anwendung erstellen, die auf mobilen Geräten funktionieren muss, kann ein wenig Planung jetzt verhindern, dass Ihre Seiten 1,7 MB erreichen. Wenn sich die API ändert, müssten Sie lediglich die Bandwidthchange -Funktion aktualisieren und Ihre Website würde angemessen reagieren. Ich denke sicherlich, dass die API für Netzwerkinformationen berücksichtigt wird. , oder?

häufig gestellte Fragen (FAQs) zur Netzwerkinformation API

Wie lautet die Netzwerkinformations -API und wie funktioniert sie? Es ermöglicht Webanwendungen, auf den Status eines Gerätetyps und die Geschwindigkeit eines Geräts zugreifen zu können, mit der die Zustellung der Inhalte optimiert werden kann. Wenn sich ein Benutzer in einem langsamen Netzwerk befindet, könnte eine Website beispielsweise Bilder von geringerer Qualität senden, um die Ladezeiten zu verbessern. 🎜> Die Netzwerkinformations -API kann verwendet werden, um die Benutzererfahrung auf Ihrer reaktionsschnellen Website zu verbessern. Durch Erkennen der Netzwerkbedingungen des Benutzers können Sie das Verhalten Ihrer Website entsprechend anpassen. Wenn das Netzwerk des Benutzers beispielsweise langsam ist, können Sie die Datenmenge reduzieren, die Sie senden, z. B. Bilder mit niedrigerer Auflösung oder weniger Videoinhalte. Dies kann die Ladegeschwindigkeit und die Gesamtleistung Ihrer Website erheblich verbessern.

Wird die Netzwerkinformations -API von allen Browsern unterstützt? Ab sofort wird es von Chrome-, Opera- und Android -Browsern unterstützt. Es ist immer eine gute Idee, die neuesten Browser -Kompatibilitätsinformationen auf Websites wie „Kann ich verwenden“ zu überprüfen, bevor neue APIs implementiert werden. > Implementierung der Netzwerkinformations -API umfasst die Verwendung von JavaScript, um auf die Eigenschaften und Methoden der Netzwerkinformationen zuzugreifen. Sie können die Eigenschaften von Navigator.Connection oder Navigator.mozConnection verwenden, um ein NetzwerkInformationsobjekt zu erhalten, das die Verbindung des Benutzers darstellt

Welche Art von Informationen kann ich von der Netzwerkinformations -API erhalten? Dazu gehören Downlink, Effectivetype und RTT, die die Bandbreite in Megabit pro Sekunde, den effektiven Typ der Verbindung und die Rundwegzeit in Millisekunden liefern. Erkennen Sie den Offline -Status? Die Eigenschaft navigator.online gibt einen booleschen Wert zurück, der angibt, ob das Gerät des Benutzers online oder offline ist. ist eine Schätzung und ist möglicherweise nicht vollständig genau. Es basiert auf kürzlich beobachteten Netzwerkbedingungen und spiegelt möglicherweise nicht die aktuellen Netzwerkbedingungen wider. Daher sollte es eher als Leitfaden als als definitives Maß für die Netzwerkbedingungen verwendet werden. mit Dienstangestellten. Auf diese Weise können Sie das Verhalten Ihres Service -Worker anhand der Netzwerkbedingungen des Benutzers anpassen, z. B. das Caching aggressiver, wenn sich der Benutzer in einem langsamen Netzwerk befindet.

Die Netzwerkinformations -API kann möglicherweise anhand ihrer Netzwerkbedingungen verwendet werden. Die API liefert jedoch nur grobe Informationen über das Netzwerk, und diese Informationen stehen native Anwendungen auch zur Verfügung, sodass das zusätzliche Datenschutzrisiko minimal ist.

Was sind einige Anwendungsfälle für die Netzwerkinformations-API?

Die Netzwerkinformations -API kann auf verschiedene Weise verwendet werden, um die Benutzererfahrung zu verbessern. Beispielsweise kann eine Video -Streaming -Site mit dieser Verwendung automatisch die entsprechende Videoqualität basierend auf der Netzwerkgeschwindigkeit des Benutzers auswählen. Eine Nachrichtenseite könnte verwenden, um zu entscheiden, ob hochauflösende Bilder oder qualitativ hochwertige Bilder geladen werden sollen. Eine Web -App könnte sie verwenden, um Benutzer zu warnen, wenn sie sich in einem langsamen Netzwerk befinden, und einige Funktionen funktionieren möglicherweise nicht optimal.

Das obige ist der detaillierte Inhalt vonVerwendung der Netzwerkinformations -API zur Verbesserung der reaktionsschnellen Websites. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!