【JavaScript】当咱们尝试用JavaScipt测网速

时间 2019-11-06

标签 JavaScript 咱们尝试 javascipt 栏目 JavaScript 繁體版

原文原文链接

npm包地址

https://www.npmjs.com/package/network-speed-test

Github地址

https://github.com/penghuwan/network-speed-test

事情是这样的，最近尝试写一个经过判断当前网速，从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我如今一行代码都还没写，除了忽然发现这个需求的思路有些不太实际以外，另外一个缘由是我忽然问本身——

前端尼玛要怎么判断网速啊？? ? ！

前端判断网速的原理总结

(注：下面求的网速单位默认为KB/S)

经过查阅相关资料，我发现思路主要是分为如下几种：

1.经过img加载或者发起Ajax请求计算网速

经过请求一个和服务端同域的文件，例如图片等，在前端开始请求和收到响应两个时间点分别经过Date.now标记start和end，由于Date.now得出的是1970年1月1日(UTC)到当前时间通过的毫秒数,因此咱们经过end - start求出时间差（ms），而后经过计算：

文件大小（KB） * 1000 /( end -start )

就能够计算出网速了(KB/S）。前端

而请求文件又有两种方法：经过img加载或者AJAX加载：

经过建立img对象，设置onload监听回调，而后指定src, 一旦指定src,图片资源就会加载，完成时onload回调就会调用，咱们能够根据时机分别标记start和end。
经过AJAX进行请求，即建立XHR对象，在onreadystatechange回调里，判断当readystate = 4时候加载完成，根据时机分别标记start和end。

2.window.navigator.connection.downlink 网速查询

咱们还能够经过一些H5的先进API去实现，例如这里咱们可使用的是window.navigator.connection.downlink 去查询，可是正如你所知道的是，这类API都是一副德性，即老生常谈的兼容性问题，因此咱们通常都是做为一种预备的手段，经过能力检测，能用就用它，不能用就经过别的方法。并且须要注意downlink的单位是mbps,转化成KB/S的公式是

navigator.connection.downlink * 1024 / 8

乘1024能够理解，为何后面要除8呢？这是由于mbps里的b指的是bit(比特)，KB/s里面的B指的是Byte（字节），1字节(b)=8比特(bit)，因此须要除个8

3. 通常来讲，经过请求文件测算网速，单次可能会有偏差，因此咱们能够请求屡次并计算均值。

前端判断网速的方法及其优缺点

img加载测速：借助img对象加载测算网速。优势：没有跨域带来的问题。缺点：(1)要本身测文件大小并提供参数fileSize,（2）文件必须为图片（3）文件大小不能灵活控制
Ajax测速：经过Ajax测算网速。优势：（1）不用提供文件大小参数，由于能够从response首部得到（2）测试的文件不必定要是图片,且数据量能灵活控制。缺点：跨域问题
downlink测速: 经过navigator.connection.downlink读取网速。优势：不须要任何参数。缺点：1.兼容性颇有问题，2.带宽查询不是实时的,具备分钟级别的时间间隔
综合实现：先尝试采用downlink测速，不然屡次AJAX测速并求平均值

img加载测速

function getSpeedWithImg(imgUrl, fileSize) {
    return new Promise((resolve, reject) => {
        let start = null;
        let end = null;
        let img = document.createElement('img');
        start = new Date().getTime();
        img.onload = function (e) {
            end = new Date().getTime();
            const speed = fileSize * 1000 / (end - start)
            resolve(speed);
        }
        img.src = imgUrl;
    }).catch(err => { throw err });
}

Ajax测速

function getSpeedWithAjax(url) {
    return new Promise((resolve, reject) => {
        let start = null;
        let end = null;
        start = new Date().getTime();
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                end = new Date().getTime();
                const size = xhr.getResponseHeader('Content-Length') / 1024;
                const speed = size * 1000 / (end - start)
                resolve(speed);
            }
        }
        xhr.open('GET', url);
        xhr.send();
    }).catch(err => { throw err });
}

downlink测速

function getSpeedWithDnlink() {
    // downlink测算网速
    const connection = window.navigator.connection;
    if (connection && connection.downlink) {
        return connection.downlink * 1024 / 8;
    }
}

综合测速

function getNetSpeed(url, times) {
    // downlink测算网速
    const connection = window.navigator.connection;
    if (connection && connection.downlink) {
        return connection.downlink * 1024 / 8;
    }
    // 屡次测速求平均值
    const arr = [];
    for (let i = 0; i < times; i++) {
        arr.push(getSpeedWithAjax(url));
    }
    return Promise.all(arr).then(speeds => {
        let sum = 0;
        speeds.forEach(speed => {
            sum += speed;
        });
        return sum / times;
    })
}

以上代码我发了一个npm包，能够经过下载

npm i network-speed-test

使用方式node

import * from 'network-speed-test';
getSpeedWithImg("https://s2.ax1x.com/2019/08/13/mPJ2iq.jpg", 8.97).then(
    speed => {
        console.log(speed);
    }
)

getSpeedWithAjax('./speed.jpg').then(speed => {
    console.log(speed);
});

getNetSpeed('./speed.jpg', 3).then(speed => {
    console.log(speed);
});

getSpeedWithDnlink();

Github地址

https://github.com/penghuwan/network-speed-test

参考文章

http://www.javashuo.com/article/p-keyoyabb-bx.htmlgit

知乎帐号

https://www.zhihu.com/people/peng-hu-wan-56/activities