title: 弱網(wǎng)環(huán)境下的一些想法
date: 2021-06-17
description: 講一下弱網(wǎng)環(huán)境下的一些想法
開始
項(xiàng)目開發(fā)上線之后碍拆，項(xiàng)目在使用的過程中難免會(huì)在網(wǎng)絡(luò)不好的情況下運(yùn)行甘畅，那我們可以針對(duì)這種情況和結(jié)合項(xiàng)目實(shí)際情況做一些預(yù)處理和攔截搂橙，提升用戶體驗(yàn)度
做到什么程度
1、網(wǎng)絡(luò)不好的時(shí)候給予用戶相關(guān)提示
2戒幔、數(shù)據(jù)請(qǐng)求中給予相關(guān)提示
3吠谢、減少首屏資源加載、利用緩存提升操作性
4诗茎、針對(duì)圖片和一些文件資源可以做超時(shí)加載的一些處理
如何做
1工坊、網(wǎng)絡(luò)不好的時(shí)候給予用戶相關(guān)提示
前端層面：
1、根據(jù)Navigator.connection獲得設(shè)備正在使用的網(wǎng)絡(luò)連接信息敢订，根據(jù)返回的NetworkInformation提示用戶當(dāng)前網(wǎng)絡(luò)狀態(tài)王污，我們也可以基于此對(duì)請(qǐng)求和正在使用的功能做些展示優(yōu)化,
目前該屬性還是實(shí)驗(yàn)中，各瀏覽器廠商實(shí)現(xiàn)規(guī)則不一致
2楚午、根據(jù)NavigatorOnLine.onLine獲得設(shè)備聯(lián)網(wǎng)狀態(tài)昭齐，正常聯(lián)網(wǎng)（在線）返回 true，不正常聯(lián)網(wǎng)（離線）返回 false矾柜，也有相關(guān)的事件監(jiān)聽
window.addEventListener("offline", function(e) {alert("offline");})
window.addEventListener("online", function(e) {alert("online");})
服務(wù)器+前端：
可以建立長連接或者輪詢?nèi)ハ蚍?wù)器發(fā)起請(qǐng)求阱驾，根據(jù)響應(yīng)速度和一些網(wǎng)絡(luò)丟包情況判斷當(dāng)前網(wǎng)絡(luò)
2、數(shù)據(jù)請(qǐng)求中給予相關(guān)提示
1怪蔑、針對(duì)請(qǐng)求的各種情況及時(shí)處理里覆，并給出相關(guān)提示
2、項(xiàng)目中如果使用了async/await之類的方式缆瓣，應(yīng)該通過throw主動(dòng)向上拋出錯(cuò)誤喧枷，
這里拋出錯(cuò)誤是因?yàn)楣卜椒▋?nèi)還包含了其他情況的統(tǒng)一處理，你如果處理了自己的邏輯弓坞，不拋出錯(cuò)誤隧甚，公共方法就無法處理這部分情況了
3、增加公共loader,通過option聲明維護(hù)是否需要loader,而且一段時(shí)間內(nèi)發(fā)起的請(qǐng)求沒必要重復(fù)創(chuàng)建loader,我們可以通過維護(hù)計(jì)步器來控制loader的銷毀和創(chuàng)建
3渡冻、減少首屏資源加載戚扳、利用緩存提升操作性
1、資源按需加載/分包加載
2族吻、資源掛載靜態(tài)資源服務(wù)器
3咖城、核心庫和sdk等這種不長變動(dòng)的可以單獨(dú)打包一個(gè)vendor，不需要每次更新
4呼奢、針對(duì)圖片和一些文件資源可以做超時(shí)加載的一些處理
1、圖片和文件這些資源亦可以放在靜態(tài)資源服務(wù)器切平，減少本身服務(wù)器壓力的同時(shí)握础，靜態(tài)資源服務(wù)器本省對(duì)于資源加載也有以一定的優(yōu)化策略
2、給圖片加載提供中間層服務(wù)悴品，當(dāng)加載失敗時(shí)給出相關(guān)的占位圖禀综，
3简烘、中間層服務(wù)在加載之初對(duì)網(wǎng)絡(luò)狀態(tài)進(jìn)行一次判斷、當(dāng)網(wǎng)絡(luò)狀態(tài)不好時(shí)提供網(wǎng)絡(luò)不好占位圖
4定枷、文件上傳/下載孤澎，大文件可以使用分片上傳/下載
總結(jié)
不同的項(xiàng)目實(shí)際情況都會(huì)有所出入，上面的想法只是拋磚引玉欠窒，總結(jié)的情況和能想到的東西暫時(shí)就這些覆旭，也歡迎大家留言建議，集思廣益
