Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Native XHR vs jQuery Ajax v2
(version: 0)
Forked from "Native XHR vs jQuery Ajax", which seemed to fail when loading jQuery.
Comparing performance of:
Native XHR vs Native XHR 2 vs Native fetch.then vs jQuery Ajax vs jQuery Ajax (Async) vs jQuery Get vs jQuery Get 2 vs jQuery getJSON
Created:
6 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
Script Preparation code:
function showResult(data) { console.log(data); } var newUrl = "https://www.googleapis.com/discovery/v1/apis";
Tests:
Native XHR
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();
Native fetch.then
var request = fetch(newUrl).then(showResult);
jQuery Ajax
var request = $.ajax({ type: "GET", url: newUrl, success: showResult, data: null });
jQuery Ajax (Async)
var request = $.ajax({ type: "GET", async: true, url: newUrl, success: showResult, data: null });
jQuery Get
var request = $.get(newUrl, showResult);
jQuery Get 2
var request = $.get(newUrl).done(showResult);
jQuery getJSON
$.getJSON(newUrl, null, showResult);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (8)
Previous results
Fork
Test case name
Result
Native XHR
Native XHR 2
Native fetch.then
jQuery Ajax
jQuery Ajax (Async)
jQuery Get
jQuery Get 2
jQuery getJSON
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net. **Benchmark Overview** The benchmark compares the performance of different approaches for making HTTP requests in JavaScript: 1. Native XHR (XMLHttpRequest) 2. Native fetch API with .then() 3. jQuery Ajax v2 4. jQuery Ajax v2 with asynchronous mode 5. jQuery Get 6. jQuery getJSON **What's Being Tested** Each test case measures the execution time of a specific request pattern: * For Native XHR, the benchmark tests the overhead of opening and sending an HTTP request using `XMLHttpRequest`. * For Native fetch API with .then(), it tests the performance of making a request using the fetch API and handling its response with `.then()`. * For jQuery Ajax v2, it tests the performance of using jQuery's `ajax()` method to make an HTTP request. * For jQuery Ajax v2 with asynchronous mode, it tests the performance of making an asynchronous HTTP request using jQuery's `ajax()` method. * For jQuery Get and jQuery getJSON, it tests the performance of using jQuery's `get()` and `getJSON()` methods to make HTTP requests. **Options Compared** The benchmark compares different approaches for handling the response data: * Native XHR: Using a callback function (`xhr.onreadystatechange`) to process the response data * Native fetch API with .then(): Using a callback function (`showResult`) to process the response data, passed as an argument to `.then()` * jQuery Ajax v2: Using a callback function (`success`) to process the response data, passed as an argument to `ajax()` method * jQuery Ajax v2 with asynchronous mode: Same as above, but using asynchronous mode (`async: true`) * jQuery Get and jQuery getJSON: Using callback functions (`done` or `null`, respectively) to process the response data **Pros and Cons of Each Approach** Here's a brief summary: * **Native XHR**: Simple and lightweight, but requires more manual handling of the request lifecycle. Pros: low overhead, good for simple use cases. Cons: error handling can be cumbersome. * **Native fetch API with .then()**: Modern and efficient, allows for easy chaining of requests. Pros: modern, flexible, and scalable. Cons: may have a higher overhead than native XHR. * **jQuery Ajax v2**: Convenient and easy to use, but may have additional overhead due to jQuery's abstraction layer. Pros: convenient, easy to use, but may be slower. Cons: less control over the request lifecycle. * **jQuery Ajax v2 with asynchronous mode**: Same as above, but with asynchronous mode, which reduces the overhead of blocking the main thread. Pros: still convenient and easy to use, with reduced overhead. Cons: may require more careful handling of errors. **Conclusion** In summary, MeasureThat.net provides a comprehensive benchmark for comparing different approaches for making HTTP requests in JavaScript. The results help developers choose the best approach for their specific use case, balancing performance, convenience, and control over the request lifecycle.
Related benchmarks:
Native XHR vs jQuery Ajax
Native XHR vs jQuery Ajax 3.3.1
Native XHR vs jQuery Ajax3
fetch vs ajax call V2
Comments
Confirm delete:
Do you really want to delete benchmark?