如何用JavaScipt测网速

2022-04-15 0 535
目录
  • 前言
  • 前端判断网速的原理总结
    • 1.通过img加载或者发起Ajax请求计算网速
    • 2.window.navigator.connection.downlink网速查询
    • 3. 一般来说,通过请求文件测算网速
  • 前端判断网速的方法及其优缺点
    • img加载测速
  • npm包地址
    • Github地址

      前言

      事情是这样的,最近尝试写一个通过判断当前网速,从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写,除了突然发现这个需求的思路有些不太实际之外,另一个原因是我突然问自己——前端要怎么判断网速啊?? ? !

      前端判断网速的原理总结

      (注:下面求的网速单位默认为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

      使用方式

      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();

      npm包地址

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

      Github地址

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

      以上就是如何用JavaScipt测网速的详细内容,更多关于用JavaScipt测网速的资料请关注NICE源码其它相关文章!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript 如何用JavaScipt测网速 https://www.niceym.com/26476.html