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); });

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 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
ajax	5439.4 Ops/sec
fetch	10318.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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!

Related benchmarks:

ajax vs fetch (version: 0)

Comparing performance of: ajax vs fetch

Created: 3 years ago by: Guest

Jump to the latest result

ajax

fetch

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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