態(tài)

鑰匙要點

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

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

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

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

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

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

api基礎(chǔ)知識

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

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

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

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

最後，當(dāng)連接狀態(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>

在此代碼中，當(dāng)可用高帶寬時，將設(shè)置全局highbandwidth變量。其他代碼可以做出相應(yīng)的反應(yīng)，例如當(dāng)高鍵寬為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>

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

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

你嗎？ 關(guān)於網(wǎng)絡(luò)信息API

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

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

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

>

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

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

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

>

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

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

>

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

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

>

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

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

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