Benchmark: Native XHR vs jQuery Ajax 3.3.1

HTML Preparation code:

<script src="//ajax.googleapis.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();
jQuery AJAX
var request = $.ajax({ type: "GET", url: newUrl, success: showResult, data: null });
AJAX Async
var request = $.ajax({ type: "GET", async: true, url: newUrl, success: showResult, data: null });
jQuery GET
var request = $.get(newUrl, showResult);
jQuery GET2
var request = $.get(newUrl).done(showResult);
jQuery GET JSON
$.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
jQuery AJAX
AJAX Async
jQuery GET
jQuery GET2
jQuery GET JSON

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Overview**

The MeasureThat.net benchmark is designed to compare the performance of native XMLHttpRequest (XHR) with jQuery Ajax, version 3.3.1. The test cases aim to simulate real-world HTTP requests and measure the execution time for each approach.

**Test Cases**

There are six test cases:

1. **Native XHR**: This test case creates a new XHR object, sets up an event listener for the `readyState` change, and sends the request.
2. **Native XHR 2**: Similar to the first test case, but uses the `onload` property instead of setting up an event listener.
3. **jQuery AJAX**: This test case creates a new jQuery Ajax object, sets the request type, URL, success callback function, and data (which is set to null).
4. **AJAX Async**: Similar to the third test case, but adds the `async` property and sends the request asynchronously.
5. **jQuery GET**: This test case uses the `$.get()` method to send a GET request with the specified URL and success callback function.
6. **jQuery GET 2**: Similar to the fifth test case, but uses the `.done()` method instead of the standard jQuery Ajax syntax.

**Library: jQuery Ajax**

The jQuery Ajax library is used in tests 3-6. It provides an easy-to-use API for making HTTP requests, including support for asynchronous requests and callback functions.

**Special JS Features/Syntax**

None mentioned in this benchmark.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **Native XHR**: Pros - lightweight, efficient; Cons - requires manual event handling, can be error-prone.
2. **Native XHR 2**: Similar pros and cons to the first test case.
3. **jQuery AJAX**: Pros - easy-to-use API, supports asynchronous requests; Cons - adds additional overhead due to jQuery's framework.
4. **AJAX Async**: Similar pros and cons to the third test case.
5. **jQuery GET**: Pros - simple and concise syntax; Cons - may require additional setup for error handling.
6. **jQuery GET 2**: Similar pros and cons to the fifth test case.

**Other Alternatives**

In addition to native XHR and jQuery Ajax, other alternatives for making HTTP requests in JavaScript include:

1. Fetch API: A modern, standard-based API for making HTTP requests.
2. Axios: A popular third-party library for making HTTP requests with a simple, intuitive API.
3. RequestAnimationFrame: Can be used to make asynchronous requests by leveraging the browser's animation loop.

These alternatives may offer performance benefits or simpler APIs compared to native XHR and jQuery Ajax, but may also introduce additional overhead or complexity depending on the specific use case.

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/64.0.3282.140 Safari/537.36 Edge/17.17134

Browser/OS: Edge 17.17134 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR	5680.1 Ops/sec
Native XHR 2	4803.9 Ops/sec
jQuery AJAX	548.2 Ops/sec
AJAX Async	693.2 Ops/sec
jQuery GET	875.8 Ops/sec
jQuery GET2	927.3 Ops/sec
jQuery GET JSON	910.0 Ops/sec

Related benchmarks:

Native XHR vs jQuery Ajax 3.3.1 (version: 0)

Same as this: https://www.measurethat.net/Benchmarks/Show/833/13/native-xhr-vs-jquery-ajax but without some test cases since IE11 can't run them

Comparing performance of: Native XHR vs Native XHR 2 vs jQuery AJAX vs AJAX Async vs jQuery GET vs jQuery GET2 vs jQuery GET JSON

Created: 6 years ago by: Guest

Jump to the latest result

Native XHR

Native XHR 2

jQuery AJAX

AJAX Async

jQuery GET

jQuery GET2

jQuery GET JSON

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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