Fetch vs ajax vs XMLHttpRequest why is Fetch so much more incredibly fast?

Okay so these last couple of days i have been optimizing a client table.

There are a lot of clients 10k+ and obviously the table took ages to load.
Front-end team did the pagination + filters + reordering and i was wanting to keep it that way.

So i started by trying to inject rendered HTML via AJAX, which obviously sucked. was acceptably fast, but gigantic memory hog, table was very slow after.

So after that, i tried loading the data in via AJAX in JSON format and appending to the table with javascript.

I tried multiple methods of doing this, the best one was 500-1000 clients at a time, but it took more than 30 seconds to complete the table, and the page in the meantime was slow.

I soldiered on, and managed to shave off some seconds on the backend, but still, if i simply loaded the API on the browser the results appeared instantly and didn’t take 10+s per call.

This is when i tried XMLHttpRequest which yielded more or less the same resutls. And then i found out fetch, which is amazing. with fetch it now takes under 3 seconds to fully load the table.

So my question is, why? yes i could probably find out why if i deep dive the docs, but i simply am very busy and super curious, surely someone already knows this.

PS if anyone is curious on the code i am using:

Best solution (fetch)

for (var jj of {{ ret|safe }}) {
          fetch("/clients/table/build1/?start="+String(jj)).then(function (response) {
              response.json().then(function (request) {
                  for (let i = 0; i < request['results'].length; i++) {
                  $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>)
                  }
            $("#myAllClient_1").DataTable().draw(false);
            <<bit more code>>

slow ajax code:

$.ajax({
          method: "GET",
          dataType: "JSON",
          url: "/clients/table/build1/?start=" + snum,
          success: function (data) {
              for (let i = 0; i < data['results'].length; i++) {
                  $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>);
              }
              $("#myAllClient_1").DataTable().draw(false);
              <<bit more code>>
      })