自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何處理瀏覽器的斷網(wǎng)情況？

作者：趁你還年輕
開發(fā) 前端
我將在這里記錄一下自己對系統(tǒng)斷網(wǎng)情況下的處理，一方面避免bug產(chǎn)生，一方面保證用戶及時在應(yīng)用內(nèi)知道網(wǎng)絡(luò)已經(jīng)斷開連接。

 [[353877]]

好的斷網(wǎng)處理會讓人很舒適：lol的斷線重連，王者榮耀的斷線重連 可以確保游戲的繼續(xù)進行

壞的斷網(wǎng)處理甚至不處理會出bug：比如我手上的項目就出了個bug 業(yè)務(wù)人員表示非?？鄲?/p>

網(wǎng)絡(luò)問題一直是一個很值得關(guān)注的問題。

比如在慢網(wǎng)情況下，增加loading避免重復(fù)發(fā)請求，使用promise順序處理請求的返回結(jié)果，或者是增加一些友好的上傳進度提示等等。

那么大家有沒有想過斷網(wǎng)情況下該怎么做呢？比如說網(wǎng)絡(luò)正常->斷網(wǎng)->網(wǎng)絡(luò)正常。

其實我一直也沒想過，直到組里的測試測出一個斷網(wǎng)導(dǎo)致的bug，讓我意識到重度依賴網(wǎng)絡(luò)請求的前端，在斷網(wǎng)情況下可能會出現(xiàn)嚴(yán)重的bug。

因此我將在這里記錄一下自己對系統(tǒng)斷網(wǎng)情況下的處理，一方面避免bug產(chǎn)生，一方面保證用戶及時在應(yīng)用內(nèi)知道網(wǎng)絡(luò)已經(jīng)斷開連接

概覽

  • 用于檢測瀏覽器是否連網(wǎng)的navigator.onLine
  • 用于檢測網(wǎng)絡(luò)狀況的navigator.connection
  • 斷網(wǎng)事件"offline"和連網(wǎng)事件"online"
  • 斷網(wǎng)處理項目實戰(zhàn)
    • 思路和效果
    • 斷網(wǎng)處理組件使用
    • 斷網(wǎng)處理組件詳情
    • 發(fā)現(xiàn)
  • 參考資料

概覽

為了構(gòu)建一個 “斷網(wǎng)（offline）可用”的web應(yīng)用，你需要知道應(yīng)用在什么時候是斷網(wǎng)（offline）的。

不僅僅要知道什么時候斷網(wǎng)，更要知道什么時候網(wǎng)絡(luò)恢復(fù)正常（online）。

可以分解陳本下面兩種常見情況：

  1. 你需要知道用戶何時online，這樣你可以與服務(wù)器之間re-sync（重新同步）。
  2. 你需要知道用戶何時offline，這樣你可以將你未發(fā)出的請求過一段時間再向服務(wù)器發(fā)出。

通?？梢酝ㄟ^online/offline事件去做這個事情。

用于檢測瀏覽器是否連網(wǎng)的navigator.onLine

navigator.onLine

  • true online
  • false offline

可以通過network的online選項切換為offline，打印navigator.onLine驗證。

當(dāng)瀏覽器不能連接到網(wǎng)絡(luò)時，這個屬性會更新。規(guī)范中是這樣定義的：

The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...

用于檢測網(wǎng)絡(luò)狀況的navigator.connection

在youtube觀看視頻時，自動檢測網(wǎng)絡(luò)狀況切換清晰度是如何做到的呢？

國內(nèi)的視頻網(wǎng)站也會給出一個切換網(wǎng)絡(luò)的提醒，該如何去檢測呢？

也就是說，有沒有辦法檢測網(wǎng)絡(luò)狀況？判斷當(dāng)前網(wǎng)絡(luò)是流暢，擁堵，繁忙呢？

可以通過navigator.connection，屬性包括effectiveType，rtt，downlink和變更網(wǎng)絡(luò)事件change。繼承自NetworkInformation API。

navigator.connection

online狀態(tài)下運行console.log(navigator.connection); 

  1. {  
  2.     onchange: null,  
  3.     effectiveType: "4g",  
  4.     rtt: 50,  
  5.     downlink: 2,  
  6.     saveData: false  
  7. }  

通過navigator.connection可以判斷出online，fast 3g，slow 3g，和offline，這四種狀態(tài)下的effectiveType分別為4g，3g，2g，4g（rtt，downlink均為0）。

rtt和downlink是什么？NetworkInformation是什么？

這是兩個反映網(wǎng)絡(luò)狀況的參數(shù)，比type更加具象且更能反映當(dāng)前網(wǎng)絡(luò)的真實情況。

常見網(wǎng)絡(luò)情況rtt和downlink表

網(wǎng)絡(luò)狀況 rtt(ms) downlink(Mbit/s)
online 100 2.2
fast 3g 600 1.55
slow 3g 2150 0.4
offline 0 0

注意：rtt和downlink不是定值，而是實時變化的。online時，可能它現(xiàn)在是rtt 100ms，2.2Mb/s，下一秒就變成125ms，2.1Mb/s了。

rtt

  • 連接預(yù)估往返時間
  • 單位為ms
  • 值為四舍五入到25毫秒的最接近倍數(shù)（就是說這個值x%25===0，可以觀察常見網(wǎng)絡(luò)情況rtt和downlink表）
  • 值越小網(wǎng)速越快。類似ping的time吧
  • 在Web Worker中可用

downlink

  • 帶寬預(yù)估值
  • 單位為Mbit/s（注意是Mbit，不是MByte。）
  • 值也是四舍五入到最接近的25比特/秒的倍數(shù)（就是說這個值x%25===0，可以觀察常見網(wǎng)絡(luò)情況rtt和downlink表）
  • 一般越寬速度越快，也就是，信道上可以傳輸更多數(shù)。（吐槽一句，學(xué)過的通信原理還蠻有用。）
  • 值越大網(wǎng)速越快。類似高速一般比國道寬。
  • 在Web Worker中可用

草案（Draft）階段NetworkInformation API

無論是rtt，還是downlink，都是這個草案中的內(nèi)容。

除此之外還有downlinkMax，saveData，type等屬性。

更多資料可以查詢：NetworkInformation

如何檢測網(wǎng)絡(luò)變化去做出響應(yīng)呢？

NetworkInformation繼承自EventTarget，可以通過監(jiān)聽change事件去做一些響應(yīng)。

例如可以獲得網(wǎng)絡(luò)狀況的變更？ 

  1. var connection = navigator.connection；  
  2. var type = connection.effectiveType;  
  3. function updateConnectionStatus() {  
  4.   console.log("網(wǎng)絡(luò)狀況從 " + type + " 切換至" + connection.effectiveType);  
  5.   type = connection.effectiveType;  
  6. }  
  7. connection.addEventListener('change', updateConnectionStatus); 

 監(jiān)聽變更之后，我們可以彈一個Modal提醒用戶，也可以出一個Notice通知用戶網(wǎng)絡(luò)有變化，或者可以更高級得去自動切換清晰度（這個應(yīng)該比較難）。

引出NetworkInformation的概念，只是想起一個拋磚引玉的作用。這種細(xì)粒度的網(wǎng)絡(luò)狀況檢測，可以結(jié)合具體需求去具體實現(xiàn)。

在這篇博文中，我們只處理斷網(wǎng)和連網(wǎng)兩種情況，下面來看斷網(wǎng)事件"offline"和連網(wǎng)事件"online"。

斷網(wǎng)事件"offline"和連網(wǎng)事件"online"

瀏覽器有兩個事件："online" 和 "offline".

這兩個事件會在瀏覽器在online mode和offline mode之間切換時，由頁面的<body>發(fā)射出去。

事件會按照以下順序冒泡：document.body -> document -> window。

事件是不能去取消的（開發(fā)者在代碼上不能手動變?yōu)閛nline或者offline，開發(fā)時使用開發(fā)者工具可以）。

注冊上下線事件的幾種方式

最最建議window+addEventListener的組合。

  • 通過window或document或document.body和addEventListener(Chrome80僅window有效)
  • 為document或document.body的.ononline或.onoffline屬性設(shè)置一個js函數(shù)。（注意，使用window.ononline和window.onoffline會有兼容性的問題）
  • 也可以通過標(biāo)簽注冊事件<body ononline="onlineCb" onoffline="offlineCb"></body>

例子

 

  1. <div id="status"></div>  
  2. <div id="log"></div>  
  1. window.addEventListener('load', function() {  
  2.   var status = document.getElementById("status");  
  3.   var log = document.getElementById("log");  
  4.   function updateOnlineStatus(event) {  
  5.     var condition = navigator.onLine ? "online" : "offline";  
  6.     status.innerHTML = condition.toUpperCase();  
  7.     log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);  
  8.   }  
  9.   window.addEventListener('online',  updateOnlineStatus);  
  10.   window.addEventListener('offline', updateOnlineStatus);  
  11. }); 

其中insertAdjacentHTML是在標(biāo)簽節(jié)點的鄰近位置插入，可以查閱：DOM進階之insertAdjacentHTML

斷網(wǎng)處理項目實戰(zhàn)

基于vue以及iView的Spin，Notice組件封裝出離線處理組件，在需要到的頁面引入即可。

思路和效果

只要做到斷網(wǎng)提醒+遮罩，上線提醒-遮罩即可。

  • 監(jiān)聽offline，斷網(wǎng)給出提醒和遮罩：網(wǎng)絡(luò)已斷開，請檢查網(wǎng)絡(luò)連接。
  • 監(jiān)聽online，連網(wǎng)給出提醒和遮罩：網(wǎng)絡(luò)已連接。

 

斷網(wǎng)處理組件使用 

  1. <OfflineHandle  
  2.     :offlineTitle = "斷網(wǎng)處理標(biāo)題"  
  3.     :desc="斷網(wǎng)處理描述"  
  4.     :onlineTitle="連網(wǎng)提醒"  
  5. >  
  6. </OfflineHandle>  

斷網(wǎng)處理組件詳情 

  1. <!--OfflineHandle.vue-->  
  2. <template>  
  3.   <div v-if="spin" class="offline-mark">  
  4.     <Spin size="large" fix>  
  5.       <h2>{{offlineTitle}}</h2>  
  6.       <p>{{desc}}</p>  
  7.     </Spin>  
  8.   </div>  
  9. </template>  
  10. <script>  
  11. export default {  
  12.   name: 'offline-handle',  
  13.   props: {  
  14.     offlineTitle: {  
  15.       type: String,  
  16.       default: '網(wǎng)絡(luò)已斷開，請檢查網(wǎng)絡(luò)連接。',  
  17.     },  
  18.     onlineTitle: {  
  19.       type: String,  
  20.       default: '網(wǎng)絡(luò)已連接',  
  21.     },  
  22.     desc: {  
  23.       type: String,  
  24.       default: '',  
  25.     },  
  26.     duration: {  
  27.       type: Number,  
  28.       default: 4.5,  
  29.     },  
  30.   },  
  31.   data() {  
  32.     return {  
  33.       spin: false,  
  34.     };  
  35.   },  
  36.   mounted() {  
  37.     window.addEventListener('offline', this.eventHandle);  
  38.     window.addEventListener('online', this.eventHandle);  
  39.   },  
  40.   beforeDestroy() { 
  41.      window.removeEventListener('offline', this.eventHandle);  
  42.     window.removeEventListener('online', this.eventHandle);  
  43.   },  
  44.   methods: {  
  45.     eventHandle(event) {  
  46.       const type = event.type === 'offline' ? 'error' : 'success';  
  47.       this.$Notice[type]({  
  48.         title: type === 'error' ? this.offlineTitle : this.onlineTitle,  
  49.         desc: type === 'error' ? this.desc : '',  
  50.         duration: this.duration,  
  51.       }); 
  52.        setTimeout(() => {  
  53.         this.spin = event.type === 'offline';  
  54.       }, 1500);  
  55.     },  
  56.   },  
  57. };  
  58. </script>  
  59. <style lang="scss" scoped>  
  60. .offline-mark {  
  61.   position: fixed;  
  62.   top: 0;  
  63.   left: 0;  
  64.   right: 0;  
  65.   bottom: 0;  
  66.   background-color: #ccc;  
  67.   z-index: 9999;  
  68.   transition: position 2s;  
  69. }  
  70. /deep/.ivu-spin-fix {  
  71.   text-align: left;  
  72.   font-size: 20px;  
  73.   h2 {  
  74.     color: rgba(0, 0, 0, 0.8);  
  75.   }  
  76.   p {  
  77.     margin-top: 20px;  
  78.     color: red;  
  79.     font-weight: bold;  
  80.   }  
  81. }  
  82. </style>  

發(fā)現(xiàn)

  • offline和online事件：window有效，document和document.body設(shè)置無效

手上的項目只運行在Chrome瀏覽器，只有為window設(shè)置offline和online才生效。

運行環(huán)境："Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

  • 為position增加2s的transition的避免屏閃 

 

責(zé)任編輯：龐桂玉 來源： segmentfault
瀏覽器前端斷網(wǎng)
相關(guān)推薦

2012-04-23 13:43:02

HTML5瀏覽器

2021-08-18 08:20:14

SQL除數(shù)統(tǒng)計

2010-04-05 21:57:14

Netscape瀏覽器

2013-11-18 14:42:53

瀏覽器渲染

2012-12-10 11:29:21

瀏覽器搜狗

2012-03-20 11:41:18

海豚瀏覽器

2012-03-20 11:31:58

移動瀏覽器

2012-03-19 17:25:22

2013-07-25 14:17:17

2012-03-20 11:07:08

2010-12-21 10:11:35

手機瀏覽器

2013-01-14 10:58:51

傲游云瀏覽器

2012-06-21 15:38:02

獵豹瀏覽器

2012-03-19 17:17:00

移動瀏覽器歐朋

2012-03-20 11:22:02

QQ手機瀏覽器

2009-06-22 14:06:00

java瀏覽器

2010-09-01 15:40:10

DHCP服務(wù)器

2015-07-23 10:17:27

瀏覽器內(nèi)核

2015-09-15 14:02:57

DNS解析

2010-03-24 19:31:35

Nginx服務(wù)器
點贊
收藏

51CTO技術(shù)棧公眾號