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

我们在选购 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 代码：

<div>js测速
<p>线路一：<span>ss0</span></p>
<p>线路二：<span>ss1</span></p>
<p>线路三：<span>ss2</span></p>
</div>

JavaScript 代码：

<script>
var ping = 1,urlList = ['https://www.vipiu.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" style="display:none" onerror=autotest(' +i+ ') >');
 //console.log(i);
 }
}
function autotest(i){
 $("p").eq(i).find("span").text(ping*100+"ms");
}
</script>