通過JS判斷聯(lián)網類型和連接狀態(tài)的實現(xiàn)代碼
中國的移動網絡環(huán)境復雜，為了給用戶帶去更好訪問體驗，開發(fā)者希望能了解用戶當前的聯(lián)網方式，然后給用戶一個符合當前網絡環(huán)境的請求結果。
W3C的規(guī)范中給出了一個方法來獲得現(xiàn)在的網絡狀態(tài)navigator.connection；根據(jù)Working Draft 29 November 2012協(xié)議規(guī)范我們可以從接口中獲得bandwidth（帶寬，M/s）和metered兩個參數(shù)的值；還提供了一個監(jiān)聽方法，來時刻監(jiān)聽接入環(huán)境的變化情況。現(xiàn)實中我們發(fā)現(xiàn)很多瀏覽器并沒有返回bandwidth值，而且遵守了Working Draft 07 June 2011的協(xié)議返回給我們type（類型，wifi/2g/3g/4g）。
我們接下來就看看各家的支持情況
| Android 2.3+ Browser | UC | Dolphin | QQ瀏覽器 | Baidu | Firefox | Chrome | Opera Mini | Maxthon |
| Yes | No* | Yes | Yes* | Yes | Yes(New) | No | No | Yes |
說明下在iPhone中任何瀏覽器都無法得到相關信息。
通過上面的說明，我們發(fā)現(xiàn)還是可以通過這個參數(shù)了解很大一部分用戶的聯(lián)網情況的，并且為他們提供更加優(yōu)質的體驗。
接下來我們重點說說各瀏覽器的返回情況。
大部分瀏覽器會返回一個int型的類型，其中的特例是QQ瀏覽器，返回的就是類型名稱，對應關系如下
| 返回值 | QQ返回值 | 類型 |
| 0 | unknown | UNKNOWN |
| 1 | ethernet | ETHERNET |
| 2 | wifi | WIFI |
| 3 | 2g | CELL_2G |
| 4 | 3g | CELL_3G |
| 5 | 4g | CELL_4G（中國現(xiàn)在也會出現(xiàn)這個值，是hspa+） |
| ? | none | NONE |
接下去是一個更大的特例，這就是firefox，他使用了新版規(guī)范，所以返回的是bandwidth；不過很奇怪的是只要是wifi或3G他就返回20，如果是2G返回的就是0.1953125；每次都一樣不管現(xiàn)在網絡狀態(tài)到底是多少。這個問題還會繼續(xù)跟進。
給大家提供一個demo地址：http://demo.jb51.net/js/2015/net.html
Demo中對不支持connection的瀏覽器直接返回了{type:0}，這樣就很便利解決了某些瀏覽器不支持的問題；對于不支持又能上網的瀏覽器處理為“unknown”當然也是合乎情理的。
很多工程師覺得這個功能支持還不好，還是先不使用的好；但是我覺得只要錯誤能被處理，風險能被把控，為什么不給那些先天優(yōu)秀的客戶提供更友好的體驗呢。
今天同學說到讓后端判斷速度，這個可能有點難；不過確實可以通過每次的異步請求去得到用戶大概的速度（加載的時間和文件大小其實前端都能得到），然后在選擇性的提供某些服務，之后也準備向這個方向上多思考下。
相關文章
這篇文章主要為大家詳細介紹了javascript實現(xiàn)跟隨鼠標移動的圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
MySQL作為最常用的開源關系型數(shù)據(jù)庫管理系統(tǒng)之一,一直在不斷發(fā)展和改進,其中,MySQL 5.7和MySQL 8是兩個備受關注的版本,它們之間存在一些關鍵的差異,本文將深入探討這兩個版本之間的主要差異,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇基于layui的下拉列表的數(shù)據(jù)回顯方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js中 某個函數(shù)的內部函數(shù)在該函數(shù)執(zhí)行結束后仍然可以訪問這個函數(shù)中定義的變量，這稱為閉包(Closure)2008-11-11
這篇文章主要介紹了JS中setTimeout()的用法，setTimeout()是屬于window的method，但我們都是略去window這頂層對象名稱，這是用來設定一個時間，時間到了，就會執(zhí)行一個指定的method，需要深入了解的朋友可以參考下2016-01-01
在一個js文件中如果需要引入另外所依賴的js文件，可以在一個js文件中導入如下代碼即可2014-03-03
彭老濕近期月報里提到了valueOf方法，興致來了翻了下ECMA5里關于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊2013-02-02
這篇文章主要介紹了JavaScript的Proxy可以做哪些有意思的事兒,Proxy是ES6中提供的新的API，可以用來定義對象各種基本操作的自定義行為 （在文檔中被稱為traps，我覺得可以理解為一個針對對象各種行為的鉤子），,需要的朋友可以參考下2019-06-06
JS實現(xiàn)div內部的文字或圖片自動循環(huán)滾動代碼
在某些情況下需要這樣的功能:使用JS實現(xiàn)div內部的文字或圖片自動循環(huán)滾動，接下來為大家詳細介紹下實現(xiàn)方法，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要為大家詳細介紹了相冊展示PhotoSwipe.js插件實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08