Benchmark: Native XHR vs jQuery Ajax v2

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Script Preparation code:

function showResult(data) {
    console.log(data);
}
var newUrl = "https://www.googleapis.com/discovery/v1/apis";

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:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

Browser/OS: Chrome 80 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR	1946.2 Ops/sec
Native XHR 2	2059.9 Ops/sec
Native fetch.then	1873.2 Ops/sec
jQuery Ajax	1397.2 Ops/sec
jQuery Ajax (Async)	1404.7 Ops/sec
jQuery Get	1408.5 Ops/sec
jQuery Get 2	1599.6 Ops/sec
jQuery getJSON	1302.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of different approaches for making HTTP requests in JavaScript:

1. Native XHR (XMLHttpRequest)
2. Native fetch API with .then()
3. jQuery Ajax v2
4. jQuery Ajax v2 with asynchronous mode
5. jQuery Get
6. jQuery getJSON

**What's Being Tested**

Each test case measures the execution time of a specific request pattern:

* For Native XHR, the benchmark tests the overhead of opening and sending an HTTP request using `XMLHttpRequest`.
* For Native fetch API with .then(), it tests the performance of making a request using the fetch API and handling its response with `.then()`.
* For jQuery Ajax v2, it tests the performance of using jQuery's `ajax()` method to make an HTTP request.
* For jQuery Ajax v2 with asynchronous mode, it tests the performance of making an asynchronous HTTP request using jQuery's `ajax()` method.
* For jQuery Get and jQuery getJSON, it tests the performance of using jQuery's `get()` and `getJSON()` methods to make HTTP requests.

**Options Compared**

The benchmark compares different approaches for handling the response data:

* Native XHR: Using a callback function (`xhr.onreadystatechange`) to process the response data
* Native fetch API with .then(): Using a callback function (`showResult`) to process the response data, passed as an argument to `.then()`
* jQuery Ajax v2: Using a callback function (`success`) to process the response data, passed as an argument to `ajax()` method
* jQuery Ajax v2 with asynchronous mode: Same as above, but using asynchronous mode (`async: true`)
* jQuery Get and jQuery getJSON: Using callback functions (`done` or `null`, respectively) to process the response data

**Pros and Cons of Each Approach**

Here's a brief summary:

* **Native XHR**: Simple and lightweight, but requires more manual handling of the request lifecycle. Pros: low overhead, good for simple use cases. Cons: error handling can be cumbersome.
* **Native fetch API with .then()**: Modern and efficient, allows for easy chaining of requests. Pros: modern, flexible, and scalable. Cons: may have a higher overhead than native XHR.
* **jQuery Ajax v2**: Convenient and easy to use, but may have additional overhead due to jQuery's abstraction layer. Pros: convenient, easy to use, but may be slower. Cons: less control over the request lifecycle.
* **jQuery Ajax v2 with asynchronous mode**: Same as above, but with asynchronous mode, which reduces the overhead of blocking the main thread. Pros: still convenient and easy to use, with reduced overhead. Cons: may require more careful handling of errors.

**Conclusion**

In summary, MeasureThat.net provides a comprehensive benchmark for comparing different approaches for making HTTP requests in JavaScript. The results help developers choose the best approach for their specific use case, balancing performance, convenience, and control over the request lifecycle.

Related benchmarks:

Native XHR vs jQuery Ajax v2 (version: 0)

Forked from "Native XHR vs jQuery Ajax", which seemed to fail when loading jQuery.

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: 4 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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