javascript - 如何使用javascript在浏览器中测试从用户到服务器的延迟？

Question

我想利用我网站的访问者收集一些信息。
我需要的是让每个访问者 ping 3 个不同的主机名，然后将以下信息保存到数据库中。

Visitor IP, latency 1,latency 2, latency 3

当然，一切都必须对访问者透明，不能以任何方式打扰他。这可能吗？你可以给我一个例子吗？是否有任何 jQuery 插件或其他使它更容易的插件

编辑

这是我目前拥有的jsfiddle.net/dLVG6但是数据太随机了。它从 50 跳到 190

Answer 1

这将比您想象的更痛苦。

您的第一个问题是 Javascript 没有 ping。 Javascript 擅长的主要是 HTTP 和一些近亲协议(protocol)。

第二个问题是您不能只发出一些 ajax 请求并对结果计时(那样太明显了)。 same origin policy将阻止您使用 ajax 与页面来自的服务器以外的服务器通信。您需要使用 JSONP，或更改图像标签的 src，或其他更间接的东西。

您的第三个问题是您不想做任何会导致返回大量数据的事情。您不希望数据传输时间或大量服务器处理干扰测量延迟。

第四，您不能请求可能被缓存的 URL。如果该对象恰好在缓存中，您将获得非常低的“延迟”测量值，但这没有任何意义。

我的解决方案是使用不带 src 属性的图片标签。在文档加载时，将 src 设置为指向有效服务器但使用无效端口。通常，服务器简单地拒绝您的连接比生成正确的 404 错误响应更快。然后您所要做的就是测量从图像中获取错误事件需要多长时间。

来自 The Filddle :

var start = new Date().getTime();
$('#junkOne').attr('src', 'http://fate.holmes-cj.com:8886/').error(function () {
    var end = new Date().getTime();
    $('#timer').html("" + (end - start) + "ms");
});

该技术可能会得到改进。这里有一些想法:

1. 使用 IP 地址代替 DNS 主机名。
2. 多次“ping”，抛出最高分和最低分，然后对其余得分进行平均。
3. 如果您的网页正在进行大量繁重的处理，请尝试在您认为 UI 负载最轻的时候进行测试。