用户体验式非常重要的一环，而保证用户的页面的可获取性是最基础的；常规的做法则是对页面资源进行压缩，对资源做延迟加载等，或者说提升服务器的带宽等，但这些都是从站点应用自身上的考虑。在实际形况中，站点及应用可以满足绝对的流畅性，但是用户的网络环境千变万化，尤其是移动端用户，这种情况情况下页面加载速度的瓶颈完全就取决于用户的网络环境。
此时就需要站点在更深层次优化，要对客户端的网络状态做监控，根据访客的网络质量结合实际情况，降低资源大小，甚至只加载一些重要的资源，来优先保证用户可以获取到重点内容。
实现方案
通过浏览器的 Network Information API 接口中提供的Navigator对象的connection属性，来评估用户的连接速度以及设备所处的网络类型。
如上所属在浏览器调试窗口获取“navigator.connection”反馈到结果有以下参数
{
downlink: 4.7,
effectiveType: "4g",
onchange: null,
rtt: 100,
saveData: false,
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- downlink：从服务器下载资源的速度（Mbps）
- effectiveType：可能的值包括：slow-2g、2g、3g、4g，就还比downlink的速度相当于什么的网络
- onchange：是在网络状态发生变化时触发的事件
- rtt：往返时间，从设备到服务器和返回的时间（ms）
监听网络变化
需要监听网络变化，只要使用属性的中onchange方法，只要网络发生变化就会触发对应事件，然后根据当前的网络质量结合自身情况去执行对应的业务逻辑。
navigator.connection.onchange = (e) => {
console.log("网络状态更改", e.target);
//需要执行逻辑
}
1
2
3
4
2
3
4
可以根据当前的navigator.connection中effectiveType、downlink、rtt的值来实现客户端用户网络质量的判断。
