Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
fetch vs ajax call V2
(version: 0)
fetch vs ajax call
Comparing performance of:
Ajax vs Fetch
Created:
4 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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 = jQuery.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>
Run tests (2)
Previous results
Fork
Test case name
Result
Ajax
Fetch
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0
Browser/OS:
Firefox 144 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Ajax
1338.4 Ops/sec
Fetch
2496.8 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Overview** The benchmark compares the performance of two approaches: making an AJAX call using jQuery and making a fetch request to retrieve data from Google's API. **Script Preparation Code** The script preparation code is responsible for setting up the environment before running the benchmark. In this case, it defines: 1. A function `showResult` that logs the received data to the console. 2. A URL `newUrl` used in both AJAX and fetch requests. **HTML Preparation Code** The HTML preparation code includes a script tag that loads the jQuery library, which is used for making the AJAX call. **Individual Test Cases** There are two test cases: 1. **Ajax**: This test case uses the jQuery library to make an AJAX call to `newUrl`. The `jQuery.ajax` method sends a GET request with the specified URL, success callback (`showResult`), and no data. 2. **Fetch**: This test case uses the fetch API to retrieve data from Google's API at `newUrl`. It sets up a promise chain to handle both successful and error responses. **Comparison** The benchmark is comparing the performance of these two approaches: * AJAX (using jQuery) * Fetch **Pros and Cons** Here are some pros and cons of each approach: ### AJAX (using jQuery) Pros: * Well-established library with extensive documentation * Easy to use for simple requests * Can be used for both synchronous and asynchronous requests Cons: * Can add unnecessary overhead due to the library's complexity * May not perform well with large datasets or complex requests * Not as modern or widely adopted as fetch API ### Fetch Pros: * Part of the modern web platform, making it easy to use * Lightweight and efficient compared to jQuery * Supports both synchronous and asynchronous requests Cons: * Less mature than jQuery, which can lead to fewer resources available for documentation and community support * May require more code to achieve similar functionality **Library: jQuery** jQuery is a popular JavaScript library used for making AJAX calls. It provides an easy-to-use API for sending HTTP requests, manipulating the DOM, and handling events. In this benchmark, jQuery is used to make an AJAX call to Google's API. The `jQuery.ajax` method sends a GET request with the specified URL and success callback (`showResult`). This approach uses the browser's native support for XMLHTTPRequest objects under the hood. **Special JS Feature/Syntax: None** There are no special JavaScript features or syntax used in this benchmark, such as async/await or Promises. **Other Alternatives** If you're looking for alternatives to jQuery and the fetch API, consider: * Axios: A popular promise-based HTTP client library that provides a simple and intuitive way to make requests. * Modern Promise APIs (e.g., async/await): For handling asynchronous code in a more modern and concise way. Note that these alternatives may require adjustments to your codebase and workflow.
Related benchmarks:
fetch vs ajax call
fetch vs ajax call (fixed)
new fetch vs ajax call
fetch vs ajax call - updated 2021
Comments
Confirm delete:
Do you really want to delete benchmark?