Benchmark: Native XHR vs XHR 2

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 (enhanced)
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();
Fetch
var request = fetch(newUrl).then(showResult);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native XHR
Native XHR (enhanced)
Native XHR 2
Fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Linux

View result in a separate tab

Test name	Executions per second
Native XHR	34149.8 Ops/sec
Native XHR (enhanced)	33931.9 Ops/sec
Native XHR 2	31680.6 Ops/sec
Fetch	26243.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested.

**Benchmark Overview**

The benchmark compares three approaches for making HTTP requests in JavaScript: Native XHR, Native XHR 2 (also known as Enhanced XMLHttpRequest), and Fetch.

**Native XHR vs Native XHR 2**

Both of these approaches use the native XMLHttpRequest API to make a GET request. The main difference between them is how they handle the response.

In Native XHR, the `readyState` property is compared against 4 to determine when the request has completed. In contrast, Native XHR 2 uses an event-based approach by attaching a function (`showResult`) to the `load` event of the XMLHttpRequest object. This way, the callback function will be executed automatically when the response is received.

**Pros and Cons**

Native XHR:

* Pros: Simple, widely supported, and efficient.
* Cons: Not very flexible, as it relies on manual polling for the ready state.

Native XHR 2 (Enhanced XMLHttpRequest):

* Pros: More modern, event-based approach, allowing for better error handling and responsiveness.
* Cons: Requires more setup, as you need to attach a callback function to the `load` event.

**Fetch**

The Fetch API is a newer, more modern way of making HTTP requests in JavaScript. It provides a simpler and more straightforward interface compared to Native XHR or Native XHR 2.

Pros:

* Pros: Easy to use, less error-prone, and provides better support for async/await syntax.
Cons:
	+ Pros: Generally considered the best approach for new projects due to its simplicity and modernity.
	+ Cons: Not supported in older browsers like Internet Explorer or older versions of Chrome/Firefox.

**Library**

None of these approaches rely on any specific libraries. However, if we consider Fetch as a library, it's part of the Web API (Application Programming Interface) provided by web browsers.

**Special JS Feature/Syntax**

In this benchmark, we're not using any special JavaScript features or syntax like async/await, Promises, or async functions. The code is written in a synchronous style, with the callback function (`showResult`) being executed immediately when the response is received.

**Other Alternatives**

Other alternatives for making HTTP requests in JavaScript include:

* Axios: A popular library that provides a simple and consistent API for making requests.
* jQuery.ajax(): A method from the jQuery library that allows you to make HTTP requests using a synchronous or asynchronous approach.

However, these libraries are not part of the standard Web API and may not be supported by older browsers.

Related benchmarks:

Native XHR vs XHR 2 (version: 3)

Pure JavaScript XHR Benchmark

Comparing performance of: Native XHR vs Native XHR (enhanced) vs Native XHR 2 vs Fetch

Created: 9 years ago by: Registered User

Jump to the latest result

Native XHR

Native XHR (enhanced)

Native XHR 2

Fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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