测量服务器响应时间（客户端）[重复]答案

【问题标题】：Measuring server response time (client-side) [duplicate]测量服务器响应时间（客户端）[重复]
【发布时间】：2013-01-28 17:58:29
【问题描述】：

我想实现一个脚本，该脚本将使用普通浏览器从客户端测量我的服务器（= 远程 url）的响应时间，而无需任何额外的插件（Java 等）。

我只看网络速度（响应时间），不是页面加载速度。

您建议我测量什么？它必须在 tcp/ip 上运行，而不是像 ICMP (ping) 这样的其他任何东西。

您将如何绕过客户端的实施？我更喜欢使用 JavaScript (JQuery)。

更新：因为我需要进行跨域检查，所以 ajax 调用似乎不是一个选项

此外，ajax 方法似乎一点也不精确。与来自 FireBug 的信息相比，测试机器上的结果似乎有大约 50 毫秒的开销（它几乎是一个恒定值，无论域是什么 - 我猜这是两者之间的处理时间）

【问题讨论】：

你的意思是like this？
是的，但据我所知，jQuery.get 返回整个响应，包括 html 代码。在这种情况下，网站的速度会影响响应时间。我宁愿寻找类似 ping 的东西。编辑：此外，JQuery 可能（我不太熟悉）在调用回调之前调用其他代码，这将影响测量方法
阅读了这个问题，似乎来自 javascript/jquery 的跨域调用是一个失败的原因。 JSONP 和代理似乎是答案，这样做您的响应时间不再有价值。

标签： javascript jquery client-side httpresponse response-time

【解决方案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;

    }
});

【讨论】：

responseTimeMs 在您的成功函数范围之外是不可见的。
是的，但据我所知，这会返回整个响应，包括 html 代码。在这种情况下，网站的速度会影响响应时间。我说的对吗？
如果不希望服务器返回响应正文，请使用type: "HEAD"，并且只返回标头。
这听起来很合理，会检查一下。到目前为止，谢谢。
遗憾的是，这种方法似乎不够精确。我也会遇到跨域检查的问题。我不知道 ajax 调用的内部实现，但它似乎获取了标头，即使它抛出了错误回调。从中我可以看到在 google.com 上大约需要 100 毫秒（在 Firebug 中为 50 毫秒），在 example.com 上大约需要 400 毫秒（在 Firebug 中大约需要 350 毫秒）等。我已经在几个域上对此进行了测试。我不知道为什么它会获取标题，即使它不应该（错误回调），但据此我推断精度会有问题。

【解决方案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 到其他服务器，那么我对您的目标是什么感到有点困惑。

【讨论】：

这会在 ajax 请求完成之前发出警报。
@RobertFricke 哎呀，你是对的。我修好了，谢谢你的注意。
酷豆。然而，从表面上看，endTime 设置正确，但 alert 仍然在 success-callback 之前运行，因为它将在 ajax 调用之后直接执行（在进行回调之前）。
@RobertFricke 我打算将 async 设置为 false 以便函数在设置 endTime 之前停止，抱歉今天有这么多错别字...
不用向我道歉 =)

【解决方案3】：

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

现在拿差价。

【讨论】：

【解决方案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
    }
});

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

【讨论】：

就是这样，我不能让它为空。无论如何，我认为如果我只是使用@RobertFricke 解决方案请求标头，我可能会解决这个问题
@kraken 是的，您只需获取标题即可解决问题。