Benchmark: Native XHR vs XHR 2 (no ifs... just switches)

Native XHR vs XHR 2 (no ifs... just switches) (version: 0)

Pure JavaScript XHR Benchmark - Difference is using switch instead of if you lost time by making it test the value... something that isn't within the code in the others(but probably at the lower level)

Comparing performance of: Native XHR (via switch instead of if) vs Native XHR (enhanced) vs Native XHR 2 vs Fetch

Created: 6 years ago by: Guest

Jump to the latest result

Script Preparation code:

function showResult(data) {
    //console.log(data);
}
var newUrl = "https://www.googleapis.com/discovery/v1/apis";

Tests:

Native XHR (via switch instead of if)
var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { switch(xhr.readyState){ case 4: showResult(xhr); break; } } 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 (via switch instead of if)
Native XHR (enhanced)
Native XHR 2
Fetch

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 world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark test that compares the performance of three different approaches for sending HTTP requests: Native XHR (via switch), Enhanced Native XHR, and Fetch API. The test measures the number of executions per second for each approach.

**Native XHR vs XHR 2 (no ifs... just switches)**

This benchmark is testing whether using a switch statement instead of an if statement to check the request state affects performance. In this case, the switch statement only has one branch (case 4), which means it's likely optimized by the JavaScript engine.

**Native XHR (via switch instead of if) vs Native XHR (enhanced)**

These two test cases differ in how they handle the request state check:

1. **Native XHR (via switch instead of if)**: Uses a simple switch statement to check the request state.
2. **Native XHR (enhanced)**: Uses an if statement with a conditional expression to check the request state.

The enhanced version is likely using a more optimized implementation, as it doesn't require a jump table lookup like the switch statement does.

**Native XHR 2 vs Fetch**

These two test cases differ in how they send HTTP requests:

1. **Native XHR 2**: Uses the XMLHttpRequest object to send a GET request.
2. **Fetch**: Uses the Fetch API to send a GET request.

The Fetch API is a more modern and abstracted way of sending HTTP requests, which might result in better performance or simplified code.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **Native XHR (via switch instead of if)**:
	* Pros: Simple implementation.
	* Cons: Might be slower due to the switch statement lookup.
2. **Native XHR (enhanced)**:
	* Pros: Optimized implementation using conditional expressions.
	* Cons: Requires more complex code.
3. **Fetch**:
	* Pros: Modern and abstracted API, might result in better performance or simplified code.
	* Cons: Might require additional libraries or polyfills.

**Library Used**

None of the benchmark test cases use a specific library beyond the built-in `XMLHttpRequest` object for Native XHR 2. However, if we consider the Fetch API, it's a modern JavaScript API that's implemented in WebKit and Blink engines, which are used by most modern browsers.

**Special JS Feature or Syntax**

The benchmark doesn't specifically highlight any special JavaScript features or syntax beyond using switch statements and conditional expressions. However, the use of async/await is implied indirectly through the `onload` property in the Native XHR 2 test case.

Overall, this benchmark provides a good example of how to compare the performance of different approaches for sending HTTP requests in JavaScript. By understanding the pros and cons of each approach, developers can make informed decisions about which API to use based on their specific needs.

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.100 Safari/537.36

Browser/OS: Chrome 69 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR (via switch instead of if)	10383.0 Ops/sec
Native XHR (enhanced)	9719.3 Ops/sec
Native XHR 2	6714.5 Ops/sec
Fetch	6862.0 Ops/sec

Related benchmarks:

Native XHR vs XHR 2 (no ifs... just switches) (version: 0)

Pure JavaScript XHR Benchmark - Difference is using switch instead of if you lost time by making it test the value... something that isn't within the code in the others(but probably at the lower level)

Comparing performance of: Native XHR (via switch instead of if) vs Native XHR (enhanced) vs Native XHR 2 vs Fetch

Created: 6 years ago by: Guest

Jump to the latest result

Native XHR (via switch instead of if)

Native XHR (enhanced)

Native XHR 2

Fetch

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):