弱网环境下的一些想法

title: 弱网环境下的一些想法
date: 2021-06-17
description: 讲一下弱网环境下的一些想法

开始

项目开发上线之后，项目在使用的过程中难免会在网络不好的情况下运行，那我们可以针对这种情况和结合项目实际情况做一些预处理和拦截，提升用户体验度

做到什么程度

1、网络不好的时候给予用户相关提示
2、数据请求中给予相关提示
3、减少首屏资源加载、利用缓存提升操作性
4、针对图片和一些文件资源可以做超时加载的一些处理

如何做

1、网络不好的时候给予用户相关提示

前端层面：
1、根据Navigator.connection获得设备正在使用的网络连接信息，根据返回的NetworkInformation提示用户当前网络状态，我们也可以基于此对请求和正在使用的功能做些展示优化,
目前该属性还是实验中，各浏览器厂商实现规则不一致
2、根据NavigatorOnLine.onLine获得设备联网状态，正常联网（在线）返回 true，不正常联网（离线）返回 false，也有相关的事件监听

window.addEventListener("offline", function(e) {alert("offline");})
window.addEventListener("online", function(e) {alert("online");})

服务器+前端：
可以建立长连接或者轮询去向服务器发起请求，根据响应速度和一些网络丢包情况判断当前网络

2、数据请求中给予相关提示

1、针对请求的各种情况及时处理，并给出相关提示
2、项目中如果使用了async/await之类的方式，应该通过throw主动向上抛出错误，
这里抛出错误是因为公共方法内还包含了其他情况的统一处理，你如果处理了自己的逻辑，不抛出错误，公共方法就无法处理这部分情况了
3、增加公共loader,通过option声明维护是否需要loader,而且一段时间内发起的请求没必要重复创建loader,我们可以通过维护计步器来控制loader的销毁和创建

3、减少首屏资源加载、利用缓存提升操作性

1、资源按需加载/分包加载
2、资源挂载静态资源服务器
3、核心库和sdk等这种不长变动的可以单独打包一个vendor，不需要每次更新

4、针对图片和一些文件资源可以做超时加载的一些处理

1、图片和文件这些资源亦可以放在静态资源服务器，减少本身服务器压力的同时，静态资源服务器本省对于资源加载也有以一定的优化策略
2、给图片加载提供中间层服务，当加载失败时给出相关的占位图，
3、中间层服务在加载之初对网络状态进行一次判断、当网络状态不好时提供网络不好占位图
4、文件上传/下载，大文件可以使用分片上传/下载

总结

不同的项目实际情况都会有所出入，上面的想法只是抛砖引玉，总结的情况和能想到的东西暂时就这些，也欢迎大家留言建议，集思广益