Benchmark: custom promise vs jquery deferred object

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Tests:

my promise
let customPromise = function(promise) { let tempPromise = promise instanceof Promise ? promise : new Promise(promise); let next = (result, callback) => { callback(result); return result; }; return { done: (callback) => { return customPromise(tempPromise.then((result) => next(result, callback))); }, fail: (callback) => { return customPromise(tempPromise.catch((result) => next(result, callback))); }, always: (callback) => { return customPromise(tempPromise.then((result) => next(result, callback), (result) => next(result, callback))); } }; }; let parseRes = function(response) { let res = {}; res.text = response.responseText; res.status = response.status; try { res.json = JSON.parse(response.responseText); } catch (error) { res.json = null; } return res; }; let myajax = function(type, url, data) { let utype = type.toUpperCase(); if(['GET', 'POST', 'DELETE'].indexOf(utype) === -1) { throw new Error('Invalid request!'); } return customPromise((resolve, reject) => { let request = new XMLHttpRequest(); request.onloadend = () => { let response = parseRes(request); if(response.status === 200) { resolve(response.json || response.text); } else { reject(response); } }; request.open(utype, fullUrl); request.setRequestHeader("X-REQUESTED-WITH", 'XMLHttpRequest'); request.send(data); }); }; myajax("POST", "http://vanilla-js.com/path/to/api", "banana=yellow") .done((res) => { console.log('Success!'); }) .fail((res) => { console.log('Failure!'); }) .always((res) => { console.log('Always!'); });
Jquery promise
$.ajax({ type: 'POST', url: "http://vanilla-js.com/path/to/api", data: "banana=yellow" }) .done((res) => { console.log('Success!'); }) .fail((res) => { console.log('Failure!'); }) .always((res) => { console.log('Always!'); });;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
my promise
Jquery promise

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 134 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
my promise	76743.0 Ops/sec
Jquery promise	25317.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'm excited to dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test comparing the performance of two approaches: creating a custom Promise object (Vanilla JS) versus using jQuery's Deferred Object.

**Custom Promise Object (Vanilla JS)**

The Custom Promise Object implementation defines a function `customPromise` that takes a Promise as input and returns an object with three methods: `done`, `fail`, and `always`. These methods wrap the input Promise, allowing for controlled execution, rejection, or always-execution.

*   **Pros:** This approach provides fine-grained control over promise handling, allowing developers to optimize specific use cases.
*   **Cons:** Creating a custom Promise object can be more verbose than using an existing library, and may require additional memory allocation for the created object.

**jQuery Deferred Object**

The jQuery Deferred Object implementation uses jQuery's built-in `$.ajax` method to create a promise-based request. The test case calls `$ajax` with a POST request to a specific URL, passing some data. The response is then handled using the `.done`, `.fail`, and `.always` methods.

*   **Pros:** Using an existing library like jQuery reduces code size and provides well-tested functionality.
*   **Cons:** jQuery's Deferred Object can be less flexible than a custom implementation, requiring more setup for complex promise chains.

**Library Used: jQuery**

jQuery is a popular JavaScript library that provides a convenient way to work with promises. In this benchmark, it's used to create a Deferred Object and simplify the request process.

**Special JS Feature/Syntax**

The test case uses ES6 features such as arrow functions (`next`), template literals (`parseRes`), and destructuring assignment (not explicitly shown but implied). These features are supported by most modern JavaScript engines.

**Other Alternatives**

For creating custom Promise objects, you can use native JavaScript's built-in `Promise` constructor or libraries like Bluebird. For handling promises in a more functional programming style, consider using tools like Ramda or Lodash.

If you're looking for alternatives to jQuery, explore other JavaScript libraries such as PicoJs, Pixi.js, or popular frameworks like React or Angular.

**Benchmarking Considerations**

When benchmarking performance differences between these approaches:

*   Focus on the specific use cases and requirements of your application.
*   Use relevant metrics (e.g., execution frequency per second) to measure performance.
*   Ensure a consistent testing environment to minimize external factors influencing results.

Related benchmarks:

custom promise vs jquery deferred object (version: 0)

Vanilla JS VS JQuery AJAX perfomance

Comparing performance of: my promise vs Jquery promise

Created: 5 years ago by: Guest

Jump to the latest result

my promise

Jquery promise

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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