Benchmark: NATIVE XHR VS JQUERY

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.4.1.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
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
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 24 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Overview**

The benchmark tests different ways to make an HTTP GET request in JavaScript. The test cases compare the performance of native XMLHttpRequest (XHR) with jQuery-based approaches.

**What is Tested**

1. **Native XHR**: This refers to using the built-in `XMLHttpRequest` object to make a GET request.
2. **jQuery XHR**: This involves using jQuery's `ajax()` method to make a GET request.
3. **jQuery Fetch**: This uses the modern `fetch()` API, which is a part of JavaScript (ECMAScript 2015+).

**Comparison**

The benchmark compares the performance of each approach in terms of:

1. **Execution Frequency Per Second (ExecutionsPerSecond)**: This measures how many requests are executed per second.

**Options Compared**

1. **xhr.onload = showResult**: This approach sets up a callback function for when the request is complete.
2. **xhr.onreadystatechange = function() {...}``: This approach uses the `readystatechange` event to check the request status.
3. **xhr.send()`: This simply sends the request without waiting for a response.

**Pros and Cons**

1. **Native XHR (xhr.onload = showResult)**:
	* Pros: Native, no dependencies on jQuery.
	* Cons: May require more code to handle errors and callbacks.
2. **jQuery XHR ( xhr.onload = showResult )**:
	* Pros: Easier to use than native XHR, handles errors and callbacks automatically.
	* Cons: Dependent on jQuery library, which may add overhead.
3. **jQuery Fetch ( fetch() API)**:
	* Pros: Modern, easy to use, and efficient.
	* Cons: Requires support for ECMAScript 2015+ features.

**Other Considerations**

1. **Async/await syntax**: None of the test cases use async/await syntax, which is a more modern way of handling asynchronous code in JavaScript.
2. **Browser Support**: The benchmark only tests Chrome 74, so results may vary across other browsers.

**Alternatives**

If you want to explore other alternatives, here are a few:

1. **Axios**: A popular library for making HTTP requests in JavaScript that's not included in this benchmark.
2. **fetch-polyfill**: A polyfill for the modern `fetch()` API that allows support for older browsers.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the approaches tested in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 74 on Windows

View result in a separate tab

Test name	Executions per second
NATIVE XHR	3663.3 Ops/sec
NATIVE XHR 2	3485.2 Ops/sec
NATIVE FETCH	3409.4 Ops/sec
JQUERY AJAX	1482.2 Ops/sec
JQUERY AJAX ASYNC	1795.8 Ops/sec
JQUERY GET	1854.4 Ops/sec
JQUERY GET 2	2162.0 Ops/sec
JQUERY GETJSON	1966.6 Ops/sec

Related benchmarks:

NATIVE XHR VS JQUERY (version: 1)

Comparing performance of: NATIVE XHR vs NATIVE XHR 2 vs NATIVE FETCH vs JQUERY AJAX vs JQUERY AJAX ASYNC vs JQUERY GET vs JQUERY GET 2 vs JQUERY GETJSON

Created: 5 years ago by: Registered User

Jump to the latest result

NATIVE XHR

NATIVE XHR 2

NATIVE FETCH

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 24 days ago):