找出完成一个 Ajax 请求需要多长时间

Posted 2023-02-27

【中文标题】找出完成一个 Ajax 请求需要多长时间

【英文标题】：Find out how long an Ajax request took to complete

【发布时间】：2011-03-30 17:39:33

【问题描述】：

找出特定$.ajax() 请求所用时间的好方法是什么？

我想获取此信息，然后将其显示在页面上的某处。

ANSWER??::::

我是 javascript 新手，如果您不想内联“成功”函数（因为它将是一个更大的函数），这是我能想到的最好的方法。做这个？我觉得我把事情复杂化了……：

makeRequest = function()
    // Set start time
    var start_time = new Date().getTime();

    $.ajax( 
        async : true,
        success : getRquestSuccessFunction(start_time),
    );


getRquestSuccessFunction = function(start_time)
    return function(data, textStatus, request)
        var request_time = new Date().getTime() - start_time;
    

【问题讨论】：

***.com/questions/1188195/… 的可能重复项，顺便说一下没有得到回答。

@Wolph 链接的问题已被标记为与该问题重复。我不明白这怎么可能。

@www139：这个问题更好，因此一个已被标记为该问题的重复。另外，这个有更好的答案

谷歌浏览器使这变得非常简单，转到您要测量 ajax 请求的 url，打开开发控制台并转到网络选项卡 - 每次请求通过它都会显示在这里

【参考方案1】：

@codemeit 是对的。他的解决方案类似于以下使用 jQuery 处理 ajax 请求。这会以毫秒为单位返回请求时间。

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

jQuery.get('your-url', data, function(data, status, xhr) 
        var request_time = new Date().getTime() - start_time;
);

【讨论】：

我是 JavaScript 新手。这会使用唯一的 start_time 变量，还是会被异步请求覆盖？

这不适用于多个请求，downvoting

你需要创建一个请求数组，在ajax的beforeSend()函数中推送start_time——然后在success()函数中计算时间差。

如果你想要更多的粒度，请使用window.performce.now()

【参考方案2】：

这是正确的做法。

$.ajax(
    url: 'http://google.com',
    method: 'GET',
    start_time: new Date().getTime(),
    complete: function(data) 
        alert('This request took '+(new Date().getTime() - this.start_time)+' ms');
    
);

https://jsfiddle.net/0fh1cfnv/1/

【讨论】：

start_time 这里是否与 ajax 有某种特殊/相关，或者您可以像这样在 ajax 对象中简单地声明您喜欢的任何键吗？如果是这样那真的很酷，我没想到...！

这里还有一些保证事件队列明智吗？我的意思是 - 我们是否知道以这种方式声明 start_time 实际上会将该变量初始化为请求开始之前的指令，或者在请求开始之前是否有其他一些东西可能潜入队列（弄脏结果）？

这个 jquery 函数会立即发起请求，并且由于开始时间是动态声明的 - 不，你不能搞砸它。该参数也是一个对象，因此向其添加自定义属性并没有什么坏处。

简洁明了！ +1 添加自己的变量以保持对象的开始时间的技巧是基本的 javascript，并且在创建没有 jquery 的 ajax 调用时也可以使用。

【参考方案3】：

这不会给出准确的时间，因为 javascript 使用 event queue。这意味着您的程序可能会像这样执行：

启动 AJAX 请求 同时处理等待的鼠标点击事件/任何其他等待的代码行 开始处理 AJAX 就绪响应

不幸的是，据我所知，没有办法获得事件被添加到队列中的时间。 Event.timeStamp 返回事件从队列中弹出的时间，参见这个小提琴：http://jsfiddle.net/mSg55/。

html：

<a href="#">link</a>
<div></div>

Javascript：

$(function() 
    var startTime = new Date();
    $('a').click(function(e) 
        var endTime = new Date(e.timeStamp);
        $('div').append((endTime - startTime) + " ");
        //produce some heavy load to block other waiting events
        var q = Math.PI;
        for(var j=0; j<1000000; j++)
        
            q *= Math.acos(j);
        
    );

    //fire some events 'simultaneously'
    for(var i=0; i<10; i++) 
        $('a').click();
    
);

【参考方案4】：

亚里士多德对事件队列的看法是正确的。您可以做的是将您的时间戳创建滑入一段您知道将在尽可能接近 AJAX 请求开始时执行的代码中。

jQuery 的当前稳定版本（撰写本文时：2.2.2）有一个beforeSend 键，它接受一个函数。我会在那里做。

请注意，在 JavaScript 中，在函数之外声明的所有全局范围的变量都会在程序启动后立即初始化。了解 JavaScript 作用域会有所帮助。

棘手的部分是在success 回调中访问您在beforeSend 函数中声明的变量。如果您在本地声明它（使用let），您将无法在该函数范围之外轻松访问它。

这是一个示例，它会给出更准确的结果（警告：在大多数情况下！）这也是危险，因为它声明了一个全局范围的变量 (@987654326 @) 可能与同一页面上的其他脚本交互不良等。

我很想深入了解 JavaScript 原型 bind 函数的世界，但它有点超出范围。这是一个替代答案，请谨慎使用，在生产之外。

'use strict';
$.ajax(
    url: url,
    method: 'GET',
    beforeSend: function (request, settings) 
        start_time = new Date().getTime();
    ,
    success: function (response) 
        let request_time = new Date().getTime() - start_time;
        console.log(request_time);
    ,
    error: function (jqXHR) 
        console.log('ERROR! \n %s', JSON.stringify(jqXHR));
    
]);

【讨论】：

如果在节点中为全局声明添加前缀GLOBAL.。再一次...不在生产中使用它，任何地方！

【参考方案5】：

您可以将开始时间设置为 var，并计算 AJAX 操作完成时的时间差。

您可以利用 Firefox 插件 Firebug 来检查 AJAX 请求和响应的性能。 http://getfirebug.com/ 或者您可以使用 Charles 代理或 Fiddler 来嗅探流量以查看性能等。

【参考方案6】：

怎么样：

首先用请求对象全局设置属性TimeStarted。

$(document).ajaxSend(function (event, jqxhr, settings) 
    jqxhr.TimeStarted = new Date();
);

然后调用任意ajax

var request = $.ajax( 
    async : true,
    success : function()
    alert(request.TimeStarted);
   ,
);

【参考方案7】：

makeRequest = function()

    // Set start time
    console.time('makeRequest');

    $.ajax( 
        async : true,
        success : getRquestSuccessFunction(start_time),
    );


getRquestSuccessFunction = function(start_time)

    console.timeEnd('makeRequest');

    return function(data, textStatus, request) 

    

这以毫秒为单位给出输出 比如 makeRequest:1355.4951171875ms

【参考方案8】：

我摆弄了一下，得到了一个通用函数，它可以显示给所有 ajax 调用。这意味着您不必为每个 ajax 调用都做同样的事情

var start_time;   
$.ajaxSetup(
  beforeSend: function () 
    start_time = new Date().getTime();
  ,
  complete: function () 
    var request_time = new Date().getTime() - start_time;
    console.log("ajax call duration: " + request_time);
  
);

【讨论】：

这也不适用于重叠的 Ajax 调用。 start_time 将被覆盖。

【参考方案9】：

你可以使用下面的代码spinet.....

var d1 = new Date();  
$.ajax(
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: '/Survey/GET_GetTransactionTypeList',
    data: ,
    dataType: 'json',
    async: false,
    success: function (result) 
        var d2 = new Date();
        var seconds = (d2 - d1) / 1000;
        console.log(seconds);           
    ,
    error: function (request, status, error) 
        alert(request.statusText + "/" + request.statusText + "/" + error);
    
); 

如果您想减少 ajax 调用初始化持续时间，只需将 async 值设置为 false 而不是 true。像这样……

async: false,