javascript - 有没有更好的方法可以测量从 Ajax 调用返回数据所需的总时间？

Question

我正在寻找这样的方法:

function aa() {
    var start = new Date().getTime();
    $.ajax({
        cache: false,
        url: href + params.param,
        dataType: 'html'
    })
    .done(function (responseText) {
        xx();
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        yy();
    })
    .always(function () {
        zz(start);
    });
};

function zz(start) {
    var end = new Date().getTime();
    var elapsed = end.getMilliseconds() - start.getMilliseconds();
}

首先。这是衡量所需时间的有效方法吗？还有另一种方法可以做到这一点。例如，有没有什么方法可以让我从 Ajax header 中读取某些内容，如果可以，我该如何读取它？

请注意，我正在寻找代码解决方案，以便我可以在 HTML 页面上报告时间。

Answer 1

这绝对是衡量发出请求和返回数据之间的时间量的有效方法。目标是测量客户端在发出请求和接收响应之间看到的时间量，因此使用客户端的时钟是理想的。 (您通常希望避免涉及同步服务器和客户端时钟的时间比较；使用 Date: HTTP header 就可以做到这一点。)

我会做两件事来改进:

• 首先绑定(bind)always 处理程序。由于 Deferred 回调是按照它们添加的顺序执行的，绑定(bind) always 首先意味着我们不会在 done 处理程序。

• 无需实例化Date 对象。静态 Date.now() 以数字形式返回以毫秒为单位的当前时间。

您甚至可以在范围内进行经过的计算，以便您的done/fail 回调可用。

function aa() {
    var start = Date.now(), elapsed;
    $.ajax({
        cache: false,
        url: href + params.param,
        dataType: 'html'
    })
    .always(function () {
        elapsed = Date.now() - start;
    });
    .done(function (responseText) {
        xx(elapsed);
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        yy(elapsed);
    });
};