鑰匙要點

• >網(wǎng)絡信息API可以通過提供有關用戶網(wǎng)絡連接的信息，包括它是否是計量和帶寬的估計來顯著增強用戶體驗。此信息可用于有條件地加載圖像，視頻，字體等，即使在較慢或計量的連接上也確保最佳性能。
>
• 實現(xiàn)網(wǎng)絡信息API涉及使用JavaScript訪問API的屬性和方法。 API對象由Navigator.Connection返回，并提供兩個僅讀取屬性：帶寬和計量。這些屬性可用于根據(jù)用戶的連接狀態(tài)有條件地加載高分辨率圖像或其他大資產(chǎn)。
盡管具有潛在的好處，但網(wǎng)絡信息API當前的瀏覽器支持有限，并且可能會發(fā)生變化。但是，對于移動友好的網(wǎng)站或應用程序，仍然值得考慮，因為它可以幫助防止頁面變得太大且在移動網(wǎng)絡上加載緩慢。如果API更改，則可以對相關功能進行更新，以確保站點繼續(xù)做出適當?shù)姆磻?
• 響應式網(wǎng)絡設計徹底改變了網(wǎng)絡。當在一系列不同的設備和屏幕上查看時，一個站點可以調(diào)整其布局。所需的只是一些媒體查詢，以檢測屏幕尺寸并加載替代樣式或樣式表。 但是，使用屏幕尺寸來檢測瀏覽器功能類似于通過查看無線電來判斷汽車的速度?，F(xiàn)代智能手機和平板電腦的分辨率越來越大，并且會愉快地顯示出典型的桌面視圖。如果該視圖添加了許多字體，圖像或其他資產(chǎn)，則移動用戶可能會收到降級 - - 體驗，因為它們處于較慢或計量的連接上。

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

盡管網(wǎng)絡信息API草案規(guī)范在2011年發(fā)布，但此時僅提供Firefox和Chrome提供實驗支持。在我們獲得供應商共識之前，API可能會發(fā)生變化：

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

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

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

api基礎知識

網(wǎng)絡信息API對象由Navigator.connection返回。為了確?？鐬g覽器兼容性，我們需要：

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

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

• 帶寬 - 雙重表示Mb/s（每秒兆字節(jié)）的當前帶寬的估計。如果用戶離線和無窮大，則該值將為零。請注意，大多數(shù)網(wǎng)絡提供商每秒引用了Megabits中的值，典型的繁忙移動3G連接將約為400Mbps? = 400,000位/s? = 50kb/s? = 0.05MB/s。
metered - 一個布爾值，如果是，則意味著用戶的連接受到限制，并且在可能的情況下應限制帶寬的使用。
例如：

最后，當連接狀態(tài)更改時，我們可以執(zhí)行更改事件處理程序，例如

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

高分辨率圖像未加載
不必要的字體未加載
ajax輪詢放緩
ajax超時參數(shù)增加了

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

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

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

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

你嗎？ 關于網(wǎng)絡信息API

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

>網(wǎng)絡信息API是什么，它如何工作？

>網(wǎng)絡信息API是一個工具，可提供有關設備用于與Web通信的網(wǎng)絡連接的信息。它允許Web應用程序訪問設備網(wǎng)絡類型和速度的狀態(tài)，可用于優(yōu)化內(nèi)容交付。例如，如果用戶在慢速網(wǎng)絡上，則網(wǎng)站可以選擇發(fā)送較低質(zhì)量的圖像以提高負載時間。

>

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

是否所有瀏覽器支持的網(wǎng)絡信息API？

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

>

>我可以從網(wǎng)絡信息API中獲取哪些信息？>

檢測離線狀態(tài)嗎？ Navigator.Online屬性返回一個布爾值，該值指示用戶的設備在線還是離線。是一個估計值，可能不是完全準確的。它基于最近觀察到的網(wǎng)絡條件，可能無法反映當前網(wǎng)絡條件。因此，應將其用作指南，而不是網(wǎng)絡條件的確定性度量。

>

可以與服務工作者一起使用網(wǎng)絡信息API嗎？與服務工作者。這使您可以根據(jù)用戶的網(wǎng)絡條件來調(diào)整服務工作者的行為，例如當用戶在慢速網(wǎng)絡上時更積極地緩存。

使用網(wǎng)絡信息API有什么隱私含義？

>

網(wǎng)絡信息API可能會根據(jù)其網(wǎng)絡條件來用于指紋用戶。但是，API僅提供有關網(wǎng)絡的粗粒信息，并且該信息也可用于本機應用程序，因此額外的隱私風險最小。

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

以上是如何使用網(wǎng)絡信息API來改善響應式網(wǎng)站的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！