Question

Here are the two ways of implementation, that describe the issue.

The first one is the method that works really slow. It tries to get data from server, but the request is pending too long, only after that it returns data and everything’s fine (except the terrible synchronous perfomance).

asyncMethod: function(doSmth, param) {  
    var resp = $.ajax({
        type: 'GET',
        async: false,
        url: 'url'
    });
    data = resp.responseText;
    doSmth(param, data);
}

Here is the same method, but it’s asynchronous. The perfomance problem is eliminated here. But it executes the part in success only when page is reloaded. Probably reload stops some executions that were the bottleneck of the previous code sample.

asyncMethod: function(doSmth, param) {  
    var resp = $.ajax({
        type: 'GET',
        url: 'url',
        success: function () {
            data = resp.responseText;
            doSmth(param, data);
        }
    });
}

I don’t need to use asynchronous request, if the synchronous one works fast (but now it doesn’t). There seem to be some executions, that make the request remain pending for too long. I don’t see the execution that may be a bottleneck. Maybe it’s somewhere in the libraries that are used, but no other requests are active when resp is being processed.

What are the ways to fix the problem or to analyze it? An advice would be appreciated.

Answer 1

There are two main culprits if a response is sat on “pending” for too long:

• The application code that is fulfulling the ajax request is taking longer than expected
• Simple network latency (not much that can be done about that in the application layer)

If you have access to the code that is fulfilling the request then I’d start there. Also, it’s probably not a network issue if this request is taking an unusually long time compared to all your other requests