Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
custom promise vs jquery deferred object
(version: 0)
Vanilla JS VS JQuery AJAX perfomance
Comparing performance of:
my promise vs Jquery promise
Created:
6 years ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
my promise
Jquery promise
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=580315" width="100%" height="500px"></iframe>
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 one year ago):
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 (part 2) vs jquery deferred object
Promise vs. Callback
just promise vs just callback
Async vs Callback
Comments
Confirm delete:
Do you really want to delete benchmark?