Benchmark: Native XHR vs jQuery Ajax

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"><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: 6 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

Browser/OS: Chrome 66 on Mac OS X 10.11.6

View result in a separate tab

Test name	Executions per second
Native XHR	7029.4 Ops/sec
Native XHR 2	7734.6 Ops/sec
Native fetch.then	8623.9 Ops/sec
jQuery Ajax	4048.4 Ops/sec
jQuery Ajax (Async)	3942.6 Ops/sec
jQuery Get	3933.5 Ops/sec
jQuery Get 2	4171.6 Ops/sec
jQuery getJSON	3795.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark data.

**What is being tested?**

The test measures the performance of different ways to make an HTTP GET request in JavaScript. The comparison focuses on native XMLHttpRequest, jQuery's Ajax API, and the Fetch API with .then() method.

**Options compared:**

1. **Native XHR**: Using the `XMLHttpRequest` object to make a GET request.
2. **Native XHR 2**: A variation of the previous approach, where the `onload` event is set to `showResult` instead of using the `readystatechange` event.
3. **Native fetch.then**: Using the Fetch API with `.then()` method to make a GET request.
4. **jQuery Ajax**: Using jQuery's Ajax API to make a GET request.
5. **jQuery Ajax (Async)**: A variation of the previous approach, where the `async` option is set to `true`.
6. **jQuery Get**: Using jQuery's `get()` method to make a GET request.
7. **jQuery getJSON**: Using jQuery's `getJSON()` method to make a GET request.

**Pros and Cons:**

1. **Native XHR**:
	* Pros: More control over the request, no additional library dependencies.
	* Cons: Can be more verbose, requires more manual handling of errors and states.
2. **Native XHR 2**:
	* Pros: Simplified comparison with Native XHR, similar performance characteristics.
	* Cons: Still requires more manual handling of errors and states.
3. **Native fetch.then**:
	* Pros: Modern, concise way to make requests, built into modern browsers.
	* Cons: Not supported in older browsers, may require additional polyfills or workarounds.
4. **jQuery Ajax**:
	* Pros: Easy to use, widely supported, and maintained by a large community.
	* Cons: Adds an additional library dependency, can be slower than native approaches.
5. **jQuery Ajax (Async)**:
	* Pros: Similar performance characteristics to jQuery Ajax, with the added benefit of async support.
	* Cons: Requires careful handling of async/await or callback functions.
6. **jQuery Get**:
	* Pros: Simplified way to make GET requests, built into jQuery.
	* Cons: Adds an additional library dependency, can be slower than native approaches.
7. **jQuery getJSON**:
	* Pros: Convenient way to make GET requests with JSON data, built into jQuery.
	* Cons: Adds an additional library dependency, can be slower than native approaches.

**Performance characteristics:**

The benchmark results show that:

* Native XHR and Native XHR 2 have similar performance characteristics, slightly faster than the other options.
* Fetch API with `.then()` method is competitive with Native XHR, but may have better error handling and state management.
* jQuery Ajax, jQuery Ajax (Async), jQuery Get, and jQuery getJSON are slower than the native approaches, but still widely used and supported.

**Conclusion:**

The choice of approach depends on your specific use case and requirements. If you need fine-grained control over the request or support for older browsers, Native XHR might be a good choice. For modern browsers and ease of use, Fetch API with `.then()` method or jQuery Ajax could be suitable options. Always consider the trade-offs between performance, complexity, and maintainability when choosing an approach.

Related benchmarks:

Native XHR vs jQuery Ajax (version: 14)

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: Registered User

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 2 months ago):