Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
custom promise vs jquery deferred object
Vanilla JS VS JQuery AJAX perfomance
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=580315" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:134.0) Gecko/20100101 Firefox/134.0
Browser:
Firefox 134
Operating system:
Mac OS X 10.15
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
my promise
76743.0 Ops/sec
Jquery promise
25317.5 Ops/sec
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!'); });;