了解Ajax请求完成所需的时间

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

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

$.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/

因为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();
    }
});

jQuery的当前稳定版本(在编写本文时:2.2.2)具有 beforeSend 接受函数的键。我会在那里做的。

在函数之外

棘手的部分是访问您在 发送前 success 回拨。如果您在本地声明(使用 let )在该函数的作用域之外,您不能轻松地访问它。

警告:在大多数情况下! 危险的 因为它声明了一个全局范围的变量( start_time )可能会与同一页上的其他脚本发生不好的交互,等等。

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));
    }
]);

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

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

这个怎么样:

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

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

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

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) {

    }
}

这将以毫秒为单位提供输出

我做了一些修改,得到了一个通用函数,可以显示所有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);
  }
});

您可以使用下面的代码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,