JS 测试网络速度与网络延迟

更新日期: 2019-01-15阅读: 2.6k标签: 网络

一、延迟与网速

通过js加载一张1x1的极小图片,测试出图片加载的所用的时长。如果换一个几百KB的图片,则可心用来计算下载网速

document.write('<input type="button" value="停止计时" onclick="clearTimeout(timeid) " />   ');
document.write('<input type="button" value="继续计时" onclick="ld()" />   ');
document.write('<div id="msg">正在测试网络延迟,请稍后...</div>');
var n = 0,tcp,timeid;
var ld = function() {
    var tcp,t = ( + new Date),img = new Image;
    img.onload = function(){
        var tcp =( + new Date) - t;
        n=n+1;
        console.log(n + ':  ' + tcp + '    ' + ( + new Date));
        document.getElementById("msg").innerText=tcp;
        if(n<100) timeid=setTimeout("ld()", 2000);
    }
    img.src = "png_1x1.png?" + Math.random(); //一张200多B的图片
};
ld();


但是,第一次加载图像时,它将比后续加载花费更长的时间,即使我们确保图像没有被缓存。因为第一次在两个主机(在我们的例子中是浏览器和服务器)之间打开TCP连接时,它们需要“握手”。一旦建立连接,它就会保持打开状态,直到两端都通过类似的握手决定关闭它。我们现在可以稍微修改我们的代码以考虑TCP握手的时间,并相应地测量延迟。

document.write('<input type="button" value="停止计时" onclick="clearTimeout(timeid) " />   ');
document.write('<input type="button" value="继续计时" onclick="ld()" />   ');
document.write('<div id="msg">正在测试网络延迟,请稍后...</div>');
var n = 0,tcp,timeid;
var ld = function() {
    var tcp,t = ( + new Date),img = new Image;
    img.onload = function(){
        var tcp =( + new Date) - t;
        n=n+1;
        console.log(n + ':  ' + tcp + '    ' + ( + new Date));
        document.getElementById("msg").innerText=tcp;
        if(n<100) timeid=setTimeout("ld()", 2000);
    }
    img.src = "png_1x1.png?" + Math.random();
};
var img_start = new Image;
img_start.onload = function(){ld();}
img_start.src = "png_1x1.png?" + Math.random();


同类版本实例

<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>js实现的网速测试方法</title>
</head>
<body>
 <script>
        document.write("<div id='div1'>正在下载测速图片,请稍后...</div>");var szsrc = "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?id="+Math.round();
        var st = new Date();
        document.write(" <IMG height=300 alt=测试图片 src='"+szsrc+"'  width=400 onload=showspeed() >");
        function showspeed()
        {
          var fs = 1.46*1024;  //图片文件大小(KB)
          var l = 2;    //小数点的位数
          var et = new Date();
          alltime = fs*1000/(et - st)
          Lnum = Math.pow(10,l)
          calcspeed = Math.round(alltime*Lnum)/Lnum
          document.getElementById("div1").innerHTML = "您的下载速度为:"+calcspeed+" (KB/秒)  带宽约" + Math.round(calcspeed/128*Lnum)/Lnum  + "M";
        }
</script>
</body>
</html>

注意,下载图片大小要合适,且要把大小写入代码中,还有大小是1024进制的。还有延迟和网速都与服务器有关,图片地址可心用比较大的公司没有防盗链图片


二、AJAX版

 ajax版的有两个好处,一是图片文件大小js可以自己读取,二是当然是异步啦。。。

<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>js实现的网速测试方法</title>
</head>
<body>
<script>
function measureBW(fn) {
    var startTime, endTime, fileSize;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 2){
            startTime = Date.now();
        }
        if (xhr.readyState === 4 && xhr.status === 200) {
            endTime = Date.now();
            fileSize = xhr.responseText.length;
            console.log(fileSize);
            var speed = fileSize  / ((endTime - startTime)/1000) / 1024;
            fn && fn(Math.floor(speed))
        }
    }
    xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?id=" + Math.random(), true);
    xhr.send();
}

measureBW((speed)=>{
    document.write("<div id='div1'>"+speed + " KB/s</div>");
    console.log(speed + " KB/s");  //215 KB/sec
})
</script>
</body>
</html>


同样,考虑到http请求需要建立连接,以及等待响应,这些过程也会消耗一些时间,所以以上的方法可能不会准确的检测出网络带宽。

我们可以同时发出多次请求,来减少http请求建立连接,等待响应的影响,参考如下代码:

function measureBW(fn,time) {
    time = time || 1;
    var startTime, endTime, fileSize;
    var count = time ;
    var _this = this;
    function measureBWSimple () {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if(!fileSize){
                    fileSize = xhr.responseText.length;
                }
                count --;
                if(count<=0){
                    endTime = Date.now();
                    var speed = fileSize * time  / ((endTime - startTime)/1000) / 1024;
                    fn && fn(Math.floor(speed));
                }
            }
        }
        xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png?" + Math.random(), true);
        xhr.send();
    }
    startTime = Date.now();
    for(var x = time;x>0;x--){
        measureBWSimple()
    }
}

measureBW((speed)=>{
    console.log(speed + " KB/sec");  //913 KB/sec
},10)

同理可用1像素图还测延迟


三、api

在 Chrome65+ 的版本中,添加了一些原生的方法可以检测有关设备正在使用的连接与网络进行通信的信息。

参考如下代码,我们就可以检测到网络带宽:

function measureBW () {
    return navigator.connection.downlink;
}
measureBW() ;


navigator.connection.downlink 会返回以(兆比特/秒)为单位的有效带宽估计值(参考MDN),这和我们常用的(KB/sec)有所差别,所以我们需要再做一下单位换算,参考如下代码:

function measureBW () {
    return navigator.connection.downlink * 1024 /8;   //单位为KB/sec
}
measureBW() ;


我们还可以通过 navigator.connection 上的 change 事件来监听网络带宽的变化:

navigator.connection.addEventListener('change', measureBW());

 

再上一个,不错的收藏

document.write('<div id="msg">正在测试网络延迟,请稍后...</div>');
document.write('<a href="#">电信网路</a>    <span class="classtime" xl-name="电信网路"></span><br>');
document.write('<a href="#">联通网路</a>    <span class="classtime" xl-name="联通网路"></span>');
var jump=1,t={},autourl=new Array(),autoname=[];
autourl[1]="http://image.baidu.com/"; //这个是电信服务器站点
autourl[2]="https://www.baidu.com/"; //这个是联通服务器站点
autoname[1]="电信网路";
autoname[2]="联通网路";
(function(){
    for(var i=1;i<autourl.length;i++){
        var img = new Image;
        //img.onerror= auto(autourl[i]);
        img.onerror= (function(j){
            return function(){
                t[autourl[j]] =(new Date())- t[autourl[j]];  //记入时间差
                console.log(autourl[j] + "    :" + t[autourl[j]] + "ms"); //console.log(t[url] + "ms");
                document.querySelector('[xl-name="'+autoname[j]+'"]').innerHTML =  t[autourl[j]] + ' ms';
                console.log(jump);
                if(jump) {
                    jump=0;
                    document.getElementById("msg").innerText = '3秒后进入【' + autoname[j] + '】';
                    //setTimeout(function(){top.location=url;},3000); //setTimeout("top.location='" + url + "';",3000);   //3s 即3000ms
                    setTimeout(function(){window.location.replace(autourl[j]);},3000);
                }
            }
        })(i);
        //闭包传值
        img.src = autourl[i] + Math.random();
        t[autourl[i]] = (+new Date());//记录开始载入时间
    }
})();


链接: https://fly63.com/article/detial/2029

浅谈对soket的理解

网络上的两个程序通过一个双向的通信链实现数据的交换,这个链接的一端就成为Socket,它是进程通信的一种,即调用这个网络库的api函数实现分布在不同主机相关进程之间的数据交换

kubernetes之Flannel网络插件部署

Kubernetes系统上Pod网络的实现依赖于第三方插件,而Flannel是由CoreOS主推的目前比较主流的容器网络解决方案,CNI插件有两种功能:网络配置和网络策略,由于flannel比较简单,并不支持网络策略

2019最新网络赚钱方法有哪些?推荐几种靠谱赚钱方式!

2019年已经是互联网发展的成熟期了,随着网络的不断发展,以及手机应用的普及,几乎人人都已经会使用网络工具。但是又有多少人知道网络赚钱这个小众的赚钱方式呢?

Angular网络请求

在Angular网络请求是一个最常见的应用之一,下列我将以 ng-alain 项目为基础描述 Angular 网络请求。注:示例中代码都以简化的形式出现。

全面分析前端的网络请求方式

大多数情况下,在前端发起一个网络请求我们只需关注下面几点:传入基本参数(url,请求方式),请求参数、请求参数类型,设置请求获取响应的方式

由Web Beacon-网络臭虫引发的思考

为何在百度搜索之后,一些网站总能够推荐我刚刚搜索过的东西?百度会记录你的搜索信息,同时会在你本地保存一个标识本地的cookie,而当你打开第三方网站时,第三方网站嵌入了百度广告的JS代码

Deepfake_深度神经网络换脸

Deepfake从技术的角度而言,这是深度图像生成模型的一次非常成功的应用,这两年虽然涌现出了很多图像生成模型方面的论文,但大都是能算是Demo,没有多少的实用价值,除非在特定领域(比如医学上)

从狭义SDN到广义SDN,网络自动化趋势下的SDN

SDN的概念主要体现的是技术架构视角,强调的是实现网络设备的软件硬件解耦、网络系统的控制面与转发面解耦,以及整体全面的可编程性。SDN的优势在于它是基于系统全局信息进行网络转发等的策略决策的

计算机网络常见问题

为了实现可靠数据传输, TCP 协议的通信双方, 都必须维护一个序列号, 以标识发送出去的数据包中, 哪些是已经被对方收到的。 三次握手的过程即是通信双方相互告知序列号起始值

前端网络监控与断网重链

最近在做大屏数据可视化项目得时候,在思考项目交付和运行情况得时候,考虑到了需要在公司大屏显示器上面展示,突然想到了项目可能面临断网及其网速慢得情况下得一下展示问题,因此作为专栏进行这两个问题得讲解

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!