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

Question

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

Visitor IP, latency 1,latency 2, latency 3

当然,一切都必须对访客透明,而不会以任何方式打扰他.这可能吗？能给我举个例子？是否有任何jQuery插件或更容易的东西

编辑

这是我到目前为止jsfiddle.net/dLVG6但数据太随机了.它从50跳到190

Answer 1

这可能是你可能想到的更多痛苦.

你的第一个问题是Javascript没有ping.大多数Javascript擅长的是HTTP和一些堂兄协议.

第二个问题是你不能只发出一些ajax请求并为结果计时(这太明显了).该同源策略会阻止你使用Ajax来说话,而不是一个页面来自其他服务器.您需要使用JSONP,或更改图像标记的src或其他更间接的内容.

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

第四,您不能要求可能被缓存的URL.如果对象碰巧在缓存中,您将获得非常低的"延迟"测量,但它没有意义.

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

来自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负载最轻时尝试进行测试.

Answer 2

使用 jQuery，您可以：（ $.ajax(url,settings)http://api.jquery.com/jQuery.ajax/ ）beforeSend并通过completevia获取时间Date.now()，减去这些时间 -> 然后您就有了请求的时间（不完全是“Ping”）尽管）