如何使用網絡信息API來改善響應式網站-js教程-PHP中文網

態

鑰匙要點

>網絡信息API可以通過提供有關用戶網絡連接的信息，包括它是否是計量和帶寬的估計來顯著增強用戶體驗。此信息可用於有條件地加載圖像，視頻，字體等，即使在較慢或計量的連接上也確保最佳性能。
實現網絡信息API涉及使用JavaScript訪問API的屬性和方法。 API對象由Navigator.Connection返回，並提供兩個僅讀取屬性：帶寬和計量。這些屬性可用於根據用戶的連接狀態有條件地加載高分辨率圖像或其他大資產。
響應式網絡設計徹底改變了網絡。當在一系列不同的設備和屏幕上查看時，一個站點可以調整其佈局。所需的只是一些媒體查詢，以檢測屏幕尺寸並加載替代樣式或樣式表。但是，使用屏幕尺寸來檢測瀏覽器功能類似於通過查看無線電來判斷汽車的速度。現代智能手機和平板電腦的分辨率越來越大，並且會愉快地顯示出典型的桌面視圖。如果該視圖添加了許多字體，圖像或其他資產，則移動用戶可能會收到降級 - - 體驗，因為它們處於較慢或計量的連接上。

網絡信息api 網絡信息API可能會有所幫助。它指示用戶是否處於計量連接（例如付款方式），並提供帶寬的估計值。使用此信息，可以有條件地加載圖像，視頻，字體和其他資源。在基本層面上，您可以覆蓋媒體查詢，以確保在有限的網絡上保留移動佈局。 >瀏覽器支持

儘管網絡信息API草案規範在2011年發布，但此時僅提供Firefox和Chrome提供實驗支持。在我們獲得供應商共識之前，API可能會發生變化：

評估帶寬很困難。當您在移動和Wi-Fi網絡之間移動或切換時，它可能會經常發生變化。網絡容量可能很好，但是與特定服務器的連接不會得出。保持帶寬估算值也可能是處理器和網絡密集型。

>該設備如何知道您的連接是否已計？即使是快速的Wi-Fi，我可以提到的某些酒店和機場也可能會勒索成本。一個選項是讓設備在建立新連接時提示您。

幸運的是，我們可以使用對象檢測來檢測API的存在。

api基礎知識

網絡信息API對象由Navigator.connection返回。為了確保跨瀏覽器兼容性，我們需要：

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

登入後複製

您可能需要將Navigator.msconnection添加到該列表中，儘管IE通常會實現非排名的API。我們的聯繫對象提供兩個只讀屬性：

帶寬 - 雙重表示Mb/s（每秒兆字節）的當前帶寬的估計。如果用戶離線和無窮大，則該值將為零。請注意，大多數網絡提供商每秒引用了Megabits中的值，典型的繁忙移動3G連接將約為400Mbps〜 = 400,000位/s〜 = 50kb/s〜 = 0.05MB/s。

最後，當連接狀態更改時，我們可以執行更改事件處理程序，例如

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

登入後複製

在此代碼中，當可用高帶寬時，將設置全局highbandwidth變量。其他代碼可以做出相應的反應，例如當高鍵寬為false時：

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

登入後複製

為了使事情變得容易一點，您可以將課程附加到帶寬截圖中的身體標籤上功能，例如

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

登入後複製

這使我們能夠有條件地加載項目，例如CSS中的背景圖像，例如

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

登入後複製

仍然可以在媒體查詢加載的桌面佈局中檢查此條件。

您是否應該使用網絡信息API？在撰寫本文時，網絡信息API幾乎沒有瀏覽器支持，並且可能會更改。就是說，如果您要創建必須在移動設備上使用的網站或應用程序，那麼現在一些計劃可以阻止您的頁面達到1.7MB。如果API發生變化，您只需要更新帶寬的函數，您的網站將做出適當的反應。我當然認為網絡信息API值得考慮。

你嗎？關於網絡信息API

的常見問題（常見問題解答）

>網絡信息API是什麼，它如何工作？

>網絡信息API是一個工具，可提供有關設備用於與Web通信的網絡連接的信息。它允許Web應用程序訪問設備網絡類型和速度的狀態，可用於優化內容交付。例如，如果用戶在慢速網絡上，則網站可以選擇發送較低質量的圖像以提高負載時間。

>我如何使用網絡信息API來改善我的響應式網站？ 🎜>網絡信息API可用於增強您響應網站上的用戶體驗。通過檢測用戶的網絡條件，您可以相應地調整網站的行為。例如，如果用戶的網絡緩慢，則可以減少發送的數據量，例如較低的分辨率圖像或更少的視頻內容。這可以顯著提高網站的加載速度和整體性能。

是否所有瀏覽器支持的網絡信息API？

>網絡信息API不受所有瀏覽器的支持。截至目前，它得到了Chrome，Opera和Android瀏覽器的支持。在實施任何新的API之前，請在“我可以使用”等網站上查看最新的瀏覽器兼容性信息。 >實現網絡信息API涉及使用JavaScript訪問網絡信息API的屬性和方法。您可以使用Navigator.connection或Navigator.MozConnection屬性來獲取代表用戶連接的網絡信息對象，然後使用此對象的屬性和事件處理程序來獲取有關連接的信息並對連接中的更改做出反應。

>

>我可以從網絡信息API中獲取哪些信息？ >
檢測離線狀態嗎？ Navigator.Online屬性返回一個布爾值，該值指示用戶的設備在線還是離線。是一個估計值，可能不是完全準確的。它基於最近觀察到的網絡條件，可能無法反映當前網絡條件。因此，應將其用作指南，而不是網絡條件的確定性度量。
>
可以與服務工作者一起使用網絡信息API嗎？與服務工作者。這使您可以根據用戶的網絡條件來調整服務工作者的行為，例如當用戶在慢速網絡上時更積極地緩存。

使用網絡信息API有什麼隱私含義？
>
網絡信息API可能會根據其網絡條件來用於指紋用戶。但是，API僅提供有關網絡的粗粒信息，並且該信息也可用於本機應用程序，因此額外的隱私風險最小。

網絡信息API的使用情況有哪些？網絡信息API可用於改善用戶體驗。例如，視頻流網站可以根據用戶的網絡速度自動選擇適當的視頻質量。新聞網站可以使用它來決定是加載高分辨率圖像還是低質量圖像。網絡應用程序可以在慢速網絡上警告用戶，並且某些功能可能無法最佳地工作。

以上是如何使用網絡信息API來改善響應式網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！