测试网速

HTML5 自带

navigator.connection (不是很准确),参考 Navigator

const connection = navigator.connection
// 获取当前网络信息类型
let type = connection.effectiveType  // 3g
// 网络信号的改变
connection.onchange = function (e) {
    console.log(connection.effectiveType);
}
console.log('是否在线', navigator.onLine)
console.log('网速', connection.downlink, 'MB/s')
window.addEventListener("online", () => {
    console.log('网络已连接')
});
window.addEventListener("offline", () => {
    console.log('网络已断开')
});

img 实现

在服务器放个 1KB 的图片 看返回时间差

多普勒测速

分五次请求，计算公式

1. api?http1.0&t=1&size=0k
2. api?http1.1&t=2&size=0k
3. api?http1.1&t=3&size=0k
4. api?http1.1&t=4&size=10k
5. api?http1.1&t=5&size=40k

• T1 = DNS + New Connection(TCP) +RTT(一次传输)
• T2 = New Connection(TCP) +RTT(一次传输)
• T3 = RTT(一次传输)
• 10k/(t4-t3)~TCP bandwidth
• (40k-10k)/(t5-t4)~TCP bandwidth

如果网速慢 可以给用户出 一倍图,获取隐藏部分,只显示重要部分