通过 JavaScript 实现在线测试 HTTP 延迟方法

小助手读文章 00:00 / 00:00

需求分析

我们在选购 VPS 时,有时候需要看一下网络质量如何,但是有的商家会禁止 ping,或者数据中心可能会很多,一个个测试需要花费较多时间,因此考虑是否能够实现批量测试 HTTP 延迟。

实现原理

HTTP/ICMP 延迟的区别

HTTP PING 延迟测试的原理是,先在客户端和服务端建立一个 TCP 连接,然后发出一个检测包测量响应时间。由于 TCP 层是位于 IP 层之上,且完成三次握手过程才能成功创建一个连接,因此保证了 HTTP PING 的可靠性和强壮性。

ICMP PING 原理是用类型码为 0 的 ICMP 发请求,收到请求的主机则用类型码为 8 的 ICMP 回应,PING 程序来计算间隔时间,以及多少个包被送达,用户就可以判断网络大致的情况。由于 ICMP 基于 IP 协议,它不保证数据被送达。

HTTP PING 和 ICMP PING 主要区别,是 HTTP PING 在测量前要建立一个 TCP 连接,因此,如果是用于建站、数据存储等等基于 HTTP 传输数据的用途,HTTP PING 延迟更能提现服务器网络性能。

onerror 事件

onerror 事件会在文档或图像加载过程中发生错误时被触发,因此我们可以利用这个时间差计算出 HTTP 延迟。

实现方法

简单举个例子:

HTML 代码:

<p><a href='https://www.vircloud.net' target='_blank'>www.vircloud.net</a>&nbsp;&nbsp;<span></span></p>
<p><a href='https://www.baidu.com' target='_blank'>www.baidu.com</a>&nbsp;&nbsp;<span></span></p>
<p><a href='https://www.qq.com' target='_blank'>www.qq.com</a>&nbsp;&nbsp;<span></span></p>

JavaScript 代码:

var ping = 1,urlList = ['https://www.vircloud.net','https://www.baidu.com','https://www.qq.com'];
setInterval("ping++",100);
newRequest();
function newRequest(){
    for(var i=0;i<urlList.length;i++){
        $("p").eq(i).find('span').html('测速中...');
        $("p").eq(i).find('span').append("<img src="+urlList[i]+"/"+Math.random()+" width='1' height='1' onerror='autotest("+i+")' style='display:none'>");
    }
}
function autotest(i){
    $("p").eq(i).find("span").text(ping*100+"ms");
}

范例参考

前往 >> VPS 云服务数据中心延迟在线测速


参考文章:

1、《JS检测不同域名响应速度


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 网络延迟测速htmljavascript方法jshttp延迟在线 的文章

 本文最后更新于 2019/10/23 18:24:22,可能因经年累月而与现状有所差异

 引用转载请注明:VirCloud's Blog > 经验 > 通过 JavaScript 实现在线测试 HTTP 延迟方法