Benchmark: new fetch vs ajax call

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Script Preparation code:

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

Tests:

Ajax
var request = $.ajax({ type: "GET", url: newUrl, success: res => showResult(res), data: null });
Fetch
fetch(newUrl) .then( (response) => { response.json().then((data) => { showResult(data); }); } ) .catch((err) => { console.log('Fetch Error :-S', err); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Ajax
Fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
Ajax	11902.5 Ops/sec
Fetch	22455.4 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 definition and test cases.

**What is being tested?**

The main goal of this benchmark is to compare the performance of two different approaches for making HTTP requests:

1. **AJAX (Asynchronous JavaScript and XML)**: Using jQuery's `ajax` method.
2. **Fetch API**: A modern JavaScript API introduced in 2015, which allows for making HTTP requests without having to rely on third-party libraries like jQuery.

**Options being compared**

In this benchmark, we have two options:

1. **jQuery's `ajax` method**: An older approach that uses a library (jQuery) to make HTTP requests.
2. **Fetch API**: A newer, built-in JavaScript API that allows for making HTTP requests in a more modern and efficient way.

**Pros and cons of each approach**

Here are some pros and cons of each approach:

* **jQuery's `ajax` method**:
	+ Pros: Widely supported, easy to use, and familiar to many developers.
	+ Cons: Relies on an external library (jQuery), which can add overhead and dependencies.
* **Fetch API**:
	+ Pros: Built-in JavaScript API, no additional libraries or dependencies required, modern and efficient.
	+ Cons: Requires a basic understanding of HTTP requests and promises.

**Library used in the test case**

In this benchmark, jQuery is used as a library to simplify making HTTP requests using the `ajax` method. The Fetch API is not explicitly used in this test case, but it's implied that it would be the preferred approach if we were to replace jQuery with a more modern solution.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in this benchmark. However, note that the `fetch` API introduces concepts like promises and async/await, which can be beneficial for performance-critical code.

**Other alternatives**

If you wanted to compare other approaches, some alternatives could include:

* **XMLHttpRequest**: Another older approach for making HTTP requests in JavaScript.
* **Libraries like Axios**: A popular third-party library that provides a simpler and more modern way of making HTTP requests.
* **Node.js and Express**: If you want to compare the performance of different server-side frameworks, Node.js with Express would be a good alternative.

**Benchmark preparation code**

The provided benchmark preparation code includes:

```javascript
const showResult = (data) => {
  console.log(data);
};

var newUrl = "https://www.googleapis.com/discovery/v1/apis";
```

This code defines a function `showResult` that logs the received data to the console, and sets up a variable `newUrl` with the URL of the API endpoint being tested.

**Individual test cases**

The two individual test cases compare the performance of jQuery's `ajax` method (Ajax) versus the Fetch API (Fetch).

In the first test case:

```javascript
var request = $.ajax({
  type: "GET",
  url: newUrl,
  success: res => showResult(res),
  data: null
});
```

This code uses jQuery's `ajax` method to make a GET request to the specified URL, with no data sent. The `showResult` function is called when the request is successful.

In the second test case:

```javascript
fetch(newUrl)
  .then((response) => {
    response.json().then((data) => {
      showResult(data);
    });
  })
  .catch((err) => {
    console.log('Fetch Error :-S', err);
  });
```

This code uses the Fetch API to make a GET request to the specified URL, with no data sent. The `showResult` function is called when the response is parsed as JSON.

I hope this explanation helps you understand what's being tested in the provided benchmark definition!

Related benchmarks:

new fetch vs ajax call (version: 0)

Comparing performance of: Ajax vs Fetch

Created: 4 years ago by: Guest

Jump to the latest result

Ajax

Fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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