测量服务器响应时间（客户端）

Question

我希望实现一个脚本，用常规浏览器（不使用任何额外插件，如Java等）从客户端测量我的服务器(远程url)的响应时间。

我只关注网络速度(响应时间)，而不是页面加载速度。你建议我用什么来进行测量？它必须在tcp/ip上运行，不能使用其他像ICMP(ping)之类的协议。

在客户端如何实现呢？我更喜欢使用JavaScript(JQuery)。

更新：由于需要进行跨域检查，ajax调用似乎不是一种选择。

此外，ajax方法似乎并不准确。结果似乎有大约50毫秒的开销(几乎是一个恒定的值，无论域是什么-我猜这是处理时间之间的差异)，与FireBug的信息相比。

- Kraken

---

你的意思是像这样吗？ - Carsten

是的，但据我所知，jQuery.get返回整个响应，包括HTML代码。在这种情况下，网站速度将影响响应时间。我更想找像ping一样的东西。另外，JQuery可能会（我不太熟悉它）在调用回调之前调用其他代码，这将影响测量方法。 - Kraken

阅读有关这个问题的资料，似乎从Javascript/jQuery进行跨域调用是没有希望的。JSONP和代理似乎是答案，通过这样做，您的响应时间就不再重要了。 - Robert Fricke

Answer 1

您只需要计时一个请求：

var sendDate = (new Date()).getTime();

$.ajax({
    //type: "GET", //with response body
    type: "HEAD", //only headers
    url: "/someurl.htm",
    success: function(){

        var receiveDate = (new Date()).getTime();

        var responseTimeMs = receiveDate - sendDate;

    }
});

- Robert Fricke

---

responseTimeMs 在你的 success 函数作用域之外不可见。 - AmericanUmlaut

是的，但据我所知，这将返回整个响应，包括HTML代码。在这种情况下，网站速度会影响响应时间。我是正确的吗？ - Kraken

如果您不想让服务器返回响应正文，请使用 type: "HEAD"，这样只会返回头部信息。 - Robert Fricke

听起来很合理，我会去检查一下。到目前为止谢谢你。 - Kraken

很遗憾，似乎这种方法不够精确。我也会遇到跨域检查的问题。我不知道ajax调用的内部实现，但似乎它即使抛出了错误回调，仍然会获取标题。从中我可以看到，在google.com上大约需要100ms（在Firebug中为50ms），在example.com上需要400ms（在Firebug中大约为350ms）等。我已经在几个域上进行了测试。我不知道为什么它会获取标题，即使它不应该（错误回调），但从这个推断出来，精度可能会有问题。 - Kraken

Answer 2

创建一个资源，该资源始终在类似于mysite.net/speedtest的url上返回空的200 OK响应。然后可以这样做：

var startTime = (new Date()).getTime(),
    endTime;

$.ajax({
    type:'GET',
    url: 'http://mysite.net/speedtest',
    async: false,
    success : function() {
        endTime = (new Date()).getTime();
    }
});

alert('Took ' + (endTime - startTime) + 'ms');

这将给您发送请求到服务器的时间，再加上服务器加载响应请求所需的最小资源的时间。

新内容： 您的问题现在与您添加的额外信息不一致。您想要获取客户端对您无法控制的URL的ping值 - 这与您最初提出的问题非常不同，即获取来自您的服务器的响应时间。如果您想要获取客户端对您的服务器的ping值，可以使用ajax调用。如果您想要获取他们对其他服务器的ping值，则我有点困惑您的目标是什么。

- AmericanUmlaut

---

在ajax请求完成之前，这将会发出警报。 - Robert Fricke

@RobertFricke 哎呀，你说得对。我已经修复了，感谢提醒。 - AmericanUmlaut

看起来endTime被正确设置了，但是根据这个情况，alert在success回调之前仍然会运行，因为它会直接在ajax调用之后执行（在回调之前）。 - Robert Fricke

@RobertFricke 我本意是将 async 设为 false，以便函数一直等到 endTime 被设置，抱歉今天打字错误太多了... - AmericanUmlaut

不需要向我道歉 =) - Robert Fricke

Answer 3

var startTime = (new Date()).getTime(),
    endTime;
$.ajax({
type: "GET",
url: "test.html",
dataType: "html",
success:function(data){
endTime = (new Date()).getTime();
}
});

现在取差值。

- Sudip Pal

Answer 4

你可以很容易地做到它。

var t = Date.now();
var t2;
$.ajax({
    url:'page',
    success:function(){
       t2 = Date.now();
       console.log(t2-t);//the time needed to do the request
    }
});

请求的页面应该为空，以模拟额外的加载时间。

- Licson

---

那就是问题所在，我无法将其清空。不管怎样，我认为如果我只是使用 @RobertFricke 的方法请求标题，我可能会避开这个问题。 - Kraken

@kraken 是的，你可以只获取头部信息，问题就解决了。 - Licson