Benchmark: Native XHR vs jQuery Ajax

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1=/jquery.min.js"></script>

Script Preparation code:

function showResult(data) {
    console.log(data);
}
var newUrl = "https://owapi.net/api/v3/u/Switch-12574/blob";

Tests:

Native XHR
var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send();
Native XHR 2
var xhr = new XMLHttpRequest(); xhr.onload = showResult; xhr.open("GET", newUrl, true); xhr.send();
Native fetch.then
var request = fetch(newUrl).then(showResult);
jQuery Ajax
var request = $.ajax({ type: "GET", url: newUrl, success: showResult, data: null });
jQuery Ajax (Async)
var request = $.ajax({ type: "GET", async: true, url: newUrl, success: showResult, data: null });
jQuery Get
var request = $.get(newUrl, showResult);
jQuery Get 2
var request = $.get(newUrl).done(showResult);
jQuery getJSON
$.getJSON(newUrl, null, showResult);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native XHR
Native XHR 2
Native fetch.then
jQuery Ajax
jQuery Ajax (Async)
jQuery Get
jQuery Get 2
jQuery getJSON

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

This is a JavaScript microbenchmarking test created by MeasureThat.net. The benchmark compares the performance of different ways to make an HTTP request in the browser.

The test measures the execution speed of the following methods:

1. Native XHR (XMLHttpRequest)
2. Native fetch API with then() method
3. jQuery Ajax ($.ajax())
4. jQuery Ajax with async set to true
5. jQuery Get (.get())
6. jQuery getJSON ($.getJSON())

Let's break down each option:

**Native XHR**

Pros: Built-in browser API, easy to implement.
Cons: Can be slower than other options due to the overhead of creating an XMLHttpRequest object and handling the response.

The first test case uses the traditional way of making an HTTP request with XHR:
```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", newUrl, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    showResult(xhr);
  }
}
xhr.send();
```
**Native fetch API with then() method**

Pros: Modern and efficient way of making HTTP requests, easy to implement.
Cons: Not supported in older browsers.

The second test case uses the fetch API with the then() method:
```javascript
var request = fetch(newUrl).then(showResult);
```
This is a modern and efficient way of making HTTP requests, and it's widely supported by most browsers.

**jQuery Ajax**

Pros: Easy to use, widely supported by older browsers.
Cons: Can be slower than other options due to the overhead of jQuery.

The third test case uses the jQuery Ajax method:
```javascript
var request = $.ajax({
  type: "GET",
  url: newUrl,
  success: showResult,
  data: null
});
```
This is a widely supported way of making HTTP requests, but it can be slower than other options due to the overhead of jQuery.

**jQuery Ajax with async set to true**

Pros: Same performance as jQuery Ajax without async.
Cons: Can lead to unexpected behavior if not handled correctly.

The fourth test case uses the jQuery Ajax method with async set to true:
```javascript
var request = $.ajax({
  type: "GET",
  async: true,
  url: newUrl,
  success: showResult,
  data: null
});
```
This is similar to the third test case, but it allows for asynchronous requests.

**jQuery Get**

Pros: Easy to use, widely supported by older browsers.
Cons: Can be slower than other options due to the overhead of jQuery.

The fifth test case uses the jQuery Get method:
```javascript
var request = $.get(newUrl, showResult);
```
This is similar to the third test case, but it uses the `.get()` method instead of `$.ajax()`.

**jQuery getJSON**

Pros: Easy to use, widely supported by older browsers.
Cons: Can be slower than other options due to the overhead of jQuery.

The sixth test case uses the jQuery getJSON method:
```javascript
var request = $.getJSON(newUrl, showResult);
```
This is similar to the third test case, but it uses the `.getJSON()` method instead of `$.ajax()`.

In summary, the test measures the performance of different ways to make an HTTP request in the browser. The native fetch API with then() method and jQuery Ajax are modern and efficient options that can provide better performance than other methods. However, the test also shows that the older browsers may still support these methods, but they might not be as fast as the newer ones.

As for the results, the top performers are:

* Native fetch API with then() method
* jQuery Ajax (async set to true)
* Native XHR

The slower options are:

* jQuery Ajax
* jQuery Get
* jQuery getJSON

It's worth noting that these results may vary depending on the specific browser and environment being used.

Related benchmarks:

Native XHR vs jQuery Ajax (version: 0)

Comparing performance of: Native XHR vs Native XHR 2 vs Native fetch.then vs jQuery Ajax vs jQuery Ajax (Async) vs jQuery Get vs jQuery Get 2 vs jQuery getJSON

Created: 8 years ago by: Guest

Jump to the latest result

Native XHR

Native XHR 2

Native fetch.then

jQuery Ajax

jQuery Ajax (Async)

jQuery Get

jQuery Get 2

jQuery getJSON

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):