Benchmark: Native XHR vs jQuery Ajax3

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, library usage, special JS features or syntax (if any), and other considerations.

**Benchmark Overview**

The benchmark tests four different ways to make an HTTP request in JavaScript:

1. Native XHR
2. Native XHR 2 (a variation of the previous one)
3. Native fetch.then (using the Fetch API)
4. jQuery Ajax (and its variations)

Each test case is executed multiple times, and the results are displayed in terms of executions per second.

**Tested Options**

Here's a comparison of the different options:

* **Native XHR**: This is the original XMLHttpRequest API used for making HTTP requests.
	+ Pros: native, widely supported, simple to use.
	+ Cons: older, less efficient than other options.
* **Native XHR 2**: A variation of Native XHR that uses a more modern approach with the `onreadystatechange` event instead of the `onload` event.
	+ Pros: slightly faster and more efficient than Native XHR.
	+ Cons: still an older API, less supported than other options.
* **Native fetch.then**: This is a newer API introduced in modern browsers that allows for making HTTP requests with a simpler syntax.
	+ Pros: fast, modern, widely supported.
	+ Cons: requires a more modern browser to work, not as widely used as XMLHttpRequest.
* **jQuery Ajax**: A library-based approach to making HTTP requests using jQuery.
	+ Pros: easy to use, widely supported, simple to set up.
	+ Cons: adds extra overhead due to the library, may impact performance.

**Library Usage**

The benchmark uses jQuery for its `Ajax` functions. This is done to compare the performance of jQuery's implementation with native HTTP requests.

**Special JS Features or Syntax (if any)**

This benchmark does not use any special JavaScript features or syntax beyond what's required for making HTTP requests.

**Other Considerations**

* **Browser support**: The benchmark uses Chrome 69 as the test browser, which is a relatively modern browser. This means that older browsers may not be supported by the benchmark.
* **Environment**: The benchmark runs in a controlled environment with no external factors influencing the results (e.g., network conditions, device hardware).

**Alternatives**

Other alternatives to these options include:

* **Axios**: A popular alternative to XMLHttpRequest and jQuery Ajax for making HTTP requests.
* **Fetch API with async/await**: A newer approach to making HTTP requests using the Fetch API that uses async/await syntax.

Overall, this benchmark provides a good comparison of four different approaches to making HTTP requests in JavaScript, highlighting the pros and cons of each option.

Latest run results:

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

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

Browser/OS: Chrome 69 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR	8926.2 Ops/sec
Native XHR 2	8779.9 Ops/sec
Native fetch.then	8353.2 Ops/sec
jQuery Ajax	3714.1 Ops/sec
jQuery Ajax (Async)	4053.3 Ops/sec
jQuery Get	3614.2 Ops/sec
jQuery Get 2	3374.8 Ops/sec
jQuery getJSON	3713.0 Ops/sec

Related benchmarks:

Native XHR vs jQuery Ajax3 (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: 6 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):