Benchmark: ajax vs fetch - MeasureThat.net

HTML Preparation code:

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 54 community runs

Desktop Results:

Chrome 26 runs

fetch

11K/s

ajax

5K/s

Fastest: fetch (2.0x faster)

View exact numbers

✓ fetch: 10,952 ops/sec
• ajax: 5,405 ops/sec

Firefox 17 runs

fetch

10K/s

ajax

4K/s

Fastest: fetch (2.4x faster)

View exact numbers

✓ fetch: 9,872 ops/sec
• ajax: 4,067 ops/sec

Safari 6 runs

fetch

992/s

ajax

746/s

Fastest: fetch (1.3x faster)

View exact numbers

✓ fetch: 992 ops/sec
• ajax: 746 ops/sec

Mobile Results:

Chrome 5 runs

fetch

3K/s

ajax

2K/s

Fastest: fetch (1.5x faster)

View exact numbers

✓ fetch: 3,058 ops/sec
• ajax: 2,066 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 6 months ago)

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

fetch

22K/s

ajax

16K/s

View exact numbers

Test name	Executions per second
✓ fetch	21,544 Ops/sec
ajax	16,260 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is testing two different approaches to making HTTP requests: `$.ajax()` (a part of jQuery) and the built-in `fetch()` API in modern JavaScript.

The benchmark is comparing the performance of these two methods, specifically:

* The number of executions per second for each method

**Options being compared:**

1. **$.ajax()**: This is a JavaScript library function that sends an HTTP request to a server. It's a part of jQuery, which provides a lot of utility functions for DOM manipulation and Ajax requests.
2. **fetch() API**: This is a built-in JavaScript API introduced in modern browsers (Chrome 129 and later) as a replacement for the older XMLHttpRequest API. It provides a simpler way to make HTTP requests using promises.

**Pros and cons of each approach:**

1. **$.ajax()**:
	* Pros:
		+ Widely supported by older browsers that don't support fetch()
		+ Can be used with other libraries like jQuery
	* Cons:
		+ Requires jQuery library, which can add overhead
		+ Less efficient than fetch() API in modern browsers
2. **fetch() API**:
	* Pros:
		+ Faster and more efficient than $.ajax() in modern browsers
		+ Built-in API means no additional library is needed
	* Cons:
		+ Requires modern browser support (Chrome 129 and later)

**Library usage:**

In this benchmark, jQuery is used for the `$.ajax()` function. The purpose of using jQuery here is likely to provide a simple way to make HTTP requests that's widely supported by older browsers.

**Special JS features/syntax:**

There are no special JavaScript features or syntax used in this benchmark beyond what's commonly found in modern web development (e.g., promises, async/await syntax). The fetch() API does use ES6 syntax (`.then()` and `.catch()`), but this is not specific to the JavaScript language itself.

**Other alternatives:**

If you're interested in alternative approaches for making HTTP requests, here are a few options:

1. **XMLHttpRequest**: An older API that's still supported by some browsers, although less efficient than fetch() or $.ajax()
2. ** Axios**: A popular JavaScript library for making HTTP requests, which provides a simpler API than jQuery's $.ajax()
3. **fetch polyfill**: If you need to support very old browsers, you can use a polyfill like Fetch Polyfill to enable the fetch() API in those environments.

I hope this explanation helps!

ajax vs fetch (version: 0)

Comparing performance of: `ajax vs fetch`

Created: 4 years ago by: Guest

Go to the latest result

ajax

fetch

Historical Performance Data aggregated from 54 community runs

Desktop Results:

Chrome 26 runs

Firefox 17 runs

Safari 6 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

ajax vs fetch (version: 0)

Comparing performance of: ajax vs fetch

Created: 4 years ago by: Guest

Go to the latest result

ajax

fetch

Historical Performance Data aggregated from 54 community runs

Desktop Results:

Chrome 26 runs

Firefox 17 runs

Safari 6 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `ajax vs fetch`