Why are multiple AJAX requests waiting (hanging) for 1s+ between them?

Whenever I send more than 1 paralel ajax request at a time to my backend, some respond within a reasonable timeframe (<100ms), however some of the requests hang for approximately 1s before returning a response, regardless of which order they are executed in.

I have decided to test this out by creating a very simple HTML+jQuery/PHP (frontend+backend) script which creates 6 paralel ajax requests and running it both on my local server, as well as Digitalocean’s server using the same setup (Debian 10 Apache + PHP 7.4).

The results on local server:

enter image description here

The results on Digitalocean server:

enter image description here

The javascript:

 function ajaxAtOnce() {
        $.get("ajax1.php", function (data) {
            console.log(data);
        });
        $.get("ajax2.php", function (data) {
            console.log(data);
        });
        $.get("ajax3.php", function (data) {
            console.log(data);
        });
        $.get("ajax4.php", function (data) {
            console.log(data);
        });
        $.get("ajax5.php", function (data) {
            console.log(data);
        });
        $.get("ajax6.php", function (data) {
            console.log(data);
        });
    }

PHP endpoints (all equal):

<?php

    // return 100 randomly ordered numbers
    $array = range(1,100);
    shuffle($array);
    echo json_encode($array);

Important notes

  • If I hardcode a large enough “timeout” inbetween ajax requests, I get a response within expected timeframe:
function ajaxWithTimeout() {
        setTimeout(function() {
            $.get("ajax1.php", function (data) {
                console.log(data);
            });
        }, 1000);

        setTimeout(function() {
            $.get("ajax2.php", function (data) {
                console.log(data);
            });
        }, 2200);

        setTimeout(function() {
            $.get("ajax3.php", function (data) {
                console.log(data);
            });
        }, 3500);

        setTimeout(function() {
            $.get("ajax4.php", function (data) {
                console.log(data);
            });
        }, 4700);

        setTimeout(function() {
            $.get("ajax5.php", function (data) {
                console.log(data);
            });
        }, 5900);

        setTimeout(function() {
            $.get("ajax6.php", function (data) {
                console.log(data);
            });
        }, 7100);
    }

  • If I send all the requests to the same endpoint (ajax1.php for example), there is no problem

  • After some research I found 2 server parameters that seem to be mentioned with regards to this issue, but they are set to their default values, and removing the limit does not have an effect:

    RateLimitInterval=30s, RateLimitBurst=1000

As you can imagine, this issue can be very frustrating, especially when developing a SPA in a JS framework like React, which is where I first noticed the issue.