jQuery, Javascript, and Mootools Performance Comparison (v17)

Revision 17 of this benchmark created on

Description

We'll modify an element's text and then change a couple CSS properties.

Preparation HTML

<div id="text">Let's change this text</div>

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

<script>
(function(C,y){"function"===typeof define&&define.amd?define(y):"object"===typeof exports?module.exports=y:C.META=y()})(this,function(){var C=window.meta,y=window.$,r,g,k=window.document,T=window.navigator,I=k.documentElement,D,A,v,B=k.documentElement.classList,J,u,U=/\./g,V=/^([\w]+)$/,W=/^#([\w\-]+)$/,X=/^\.([\w\-]+)$/;I.getElementsByTagName("*");var K,L,M,N,e,q,E,p,F,t,G,O,P,Q,R,H,w=Array.prototype.slice;u={};D=function(){A=["WebKit","Moz","O","Ms",""];for(var d=0;d<A.length;d++)if(A[d]+"MutationObserver"in
window)return window[A[d]+"MutationObserver"];return!1}();E=function(d,a,e,f){a?a.substring&&(a=a.trim()):a=k;d?d.substring&&(d=d.trim()):d=I;if("undefined"!==typeof a&&a.substring&&"@"===a.charAt(0)){t=a;a=e||k;g=E(d,a);p=[];for(a=0;a<g.length;a++)if(d=g[a],q=d.parentNode,"@:parent"===t)p.push(q);else if("@:prev"===t)p.push(d.previousElementSibling);else if("@:next"===t)p.push(d.nextElementSibling);else if("@:first"===t)p.push(q.firstElementChild);else if("@:last"===t)p.push(q.lastElementChild);
else if("@:firstChild"===t)p.push(d.firstElementChild);else if("@:lastChild"===t)p.push(d.lastElementChild);else if("@:sibs"===t)for(results=e?w.call(q.querySelectorAll(e)):w.call(q.children),f=results.length-1;0<=f;f--)p[f]!==d&&p.push(results[f]);else"@:children"===t&&(p=e?w.call(d.querySelectorAll(e)):w.call(d.children));return g=p}u[d]?g=u[d]:W.test(d)?g=u[d]=[a.getElementById(d.substring(1))]:V.test(d)?g=u[d]=w.call(a.getElementsByTagName(d)):X.test(d)?g=u[d]=w.call(a.getElementsByClassName(d.replace(U,
"  "))):d.substring?g=u[d]=w.call(a.querySelectorAll(d)):("[object NodeList]"==d?g=w.call(d):d instanceof Array?g=d:1===d.nodeType&&(g=[d]),g=$.list("unique",$.list("flatten",g.filter(function(a){return a}))));return g};r=function(){r=function(d,a){if(d.substring&&"<"===d.charAt(0)&&">"===d.slice(-1)){if(d=d.replace("<","").replace(">",""),/^[a-z]+$/i.test(d))return d=d.toLowerCase().toString(),k.createElement(d)}else return new r.fn.init(d,a)};r.fn=r.prototype={meta:"1.0.0-beta",constructor:r,init:function(d,
a){if(window===this)return new r.fn.init(d,a);g=E(d,a)},_:function(d,a,e,f,h,l){if("function"===typeof d){for(a=g.length-1;0<=a;a--)1===g[a].nodeType&&d.call(g[a]);return this}},dom:function(d,a,m,f){for(f=g.length-1;0<=f;f--)if(1===g[f].nodeType&&"undefined"!==typeof g[f])if(e=g[f],q=e.parentNode,-1<d.indexOf("+:sib"))q.appendChild(a);else if(-1<d.indexOf("+:child"))e.appendChild(a);else if(-1<d.indexOf("+:class"))B?e.classList.add(a):e.className||(e.className+=(e.className?" ":"")+a);else if(-1<
d.indexOf("+:css"))if(!0===a instanceof Object)for(var h in a)a.hasOwnProperty(h)&&(e.style[h]=a[h]);else e.style[a]=m;else if(-1<d.indexOf("+:attr"))e.setAttribute(a,m);else if(-1<d.indexOf("+:text"))e.textContent=a;else if(-1<d.indexOf("+:html"))e.innerHTML=a;else if(-1<d.indexOf("x:prev"))q.removeChild(e.previousElementSibling);else if(-1<d.indexOf("x:next"))q.removeChild(e.nextElementSibling);else if(-1<d.indexOf("x:first"))q.removeChild(q.firstElementChild);else if(-1<d.indexOf("x:last"))q.removeChild(q.lastElementChild);
else if(-1<d.indexOf("x:firstChild"))e.removeChild(e.firstElementChild);else if(-1<d.indexOf("x:lastChild"))e.removeChild(e.lastElementChild);else if(-1<d.indexOf("x:parent"))q.parentNode.removeChild(q);else if(-1<d.indexOf("x:self"))q.removeChild(e);else if(-1<d.indexOf("x:child"))e.removeChild(e.querySelectorAll(a));else if(-1<d.indexOf("x:class"))B?e.classList.remove(a):(b=new RegExp("(^|\\s)"+a+"(\\s|$)","g"),e.className&&(e.className=e.className.replace(b,"$2")));else if(-1<d.indexOf("x:css"))if(!0===
a instanceof Array)for(f=0;f<a.length;f++)e.style[a[f]]="";else e.style[a]="";else if(-1<d.indexOf("x:attr"))e.removeAttribute(a);else if(-1<d.indexOf("x:text"))e.textContent=e.textContent.replace(a,"")||"";else if(-1<d.indexOf("x:html"))e.innerHTML="";else{if(-1<d.indexOf("@:outWidth"))return a=e.offsetWidth,d&&(d=getComputedStyle(e),a+=parseInt(d.marginLeft)+parseInt(d.marginRight)),a;if(-1<d.indexOf("@:outHeight"))return a=e.offsetHeight,d&&(d=getComputedStyle(e),a+=parseInt(d.marginTop)+parseInt(d.marginBottom)),
a;if(-1<d.indexOf("@:index"))return d?e[d]:e;if(-1<d.indexOf("@:offset"))return{top:e.offsetTop,left:e.offsetLeft};if(-1<d.indexOf("@:offsetParent"))return e.offsetParent||e;if(-1<d.indexOf("@:class"))return e.className;if(-1<d.indexOf("@:css"))return e.currentStyle?e.currentStyle[$.text("camelCase",a)]:k.defaultView&&k.defaultView.getComputedStyle?k.defaultView.getComputedStyle(e,null).getPropertyValue(a):e.style[$.text("camelCase",a)];if(-1<d.indexOf("@:attr"))e.getAttribute(d);else{if(-1<d.indexOf("@:text"))return e.textContent;
if(-1<d.indexOf("@:html"))return e.innerHTML;if(-1<d.indexOf("?:focus"))return e===k.activeElement;if(-1<d.indexOf("?:class"))return B?e.classList.contains(a):e.className.match(new RegExp("(^|\\s)"+a+"(\\s|$)"));if(-1<d.indexOf("?:css")){if(d)return e[a]===m?!0:0;getComputedStyle(e[a])}else if(-1<d.indexOf("?:attr")){if(a)return e.getAttribute(a)===m?!0:0;e.hasAttribute(a)}else{if(-1<d.indexOf("?:text"))return e.textContent===a;if(-1<d.indexOf("?:html"))return e.innerHTML===a;if(-1<d.indexOf("#:class")){if(B)return e.classList.contains(a)&&
e.classList.contains(m)?e.classList.remove(a):e.classList.contains(a)?(e.classList.remove(a),e.classList.add(m)):(e.classList.contains(m)&&e.classList.remove(m),e.classList.add(a));b=new RegExp("(^|\\s)"+a+"(\\s|$)","g");c=new RegExp("(^|\\s)"+m+"(\\s|$)","g");e.className.match(b)&&e.className.match(c)?e.className.replace(c,""):e.className.match(b)?e.className=e.className.replace(b,m):e.className.match(c)?e.className.replace(c,a):e.className+=(e.className?" ":"")+a}else if(-1<d.indexOf("#:css"))e.style[a]=
e.style[a]!==m?m:"";else{if(-1<d.indexOf("#:attr"))return e.getAttribute(a)!==m?e.setAttribute(a,m):e.setAttribute(a,"");if(-1<d.indexOf("#:text"))return e.textContent!==a?e.textContent=a:e.textContent=m;if(-1<d.indexOf("#:html"))return e.innerHTML!==a?e.innerHTML=a:e.innerHTML=m}}}}return this},flag:function(d,a,e,f){"undefined"===typeof f&&(f=0);var h=d;if(-1<h.indexOf("+:")){d=d.replace("+:","","gi");for(var l=g.length-1;0<=l;l--)1===g[l].nodeType&&("ready"===d?"complete"!==g[l].readyState&&"loaded"!==
g[l].readyState&&(window.ActiveXObject||"ActiveXObject"in window||"interactive"!==g[l].readyState)?g[l].addEventListener("DOMContentLoaded",a.bind(g[l]),0):a.bind(g[l]):"function"!==typeof a&&"function"!==typeof e||g[l].addEventListener(d,function n(d){d=d||window.event;d.target=d.target||d.srcElement;if("function"===typeof a)1===e&&this.removeEventListener(d.type,n,0),a.call(this);else if("function"===typeof e){F=w.call(this.querySelectorAll(a));for(var h=F.length-1;0<=h;h--)d.target===F[h]&&(1===
f&&this.removeEventListener(d.type,n,0),e.call(this))}},0))}if(-1<h.indexOf("x:"))for(d=d.replace("x:","","gi"),l=g.length-1;0<=l;l--)g[l].removeEventListener(d,a.bind(g[l]),0);return this},fire:function(d){for(var a=g.length-1;0<=a;a--)k.createEvent?(event=new Event(d),g[a].dispatchEvent(event)):(event=k.createEventObject(),g[a].fireEvent("on"+d,event));return this}};r.fn.init.prototype=r.fn;return window.meta=window.$=r}();$.relay=function(d,a,e,f,h){var l;-1<d.indexOf(":")?(p=d.split(":"),d=p[0],
l=p[1]):l="text";e?"function"===typeof e&&(h=f,f=e,e=null):e=null;var S=function(a,d){var e,f={arraybuffer:d.response,blob:d.response,document:d.responseText,text:d.responseText};try{e=JSON.parse(f.text)}catch(m){e=f[a]}return e},n=function(a,d,e,f,m){n=new (window.XMLHttpRequest||void 0)("MSXML2.XMLHTTP.3.0");n.open(a,d,!0);n.responseType=l;"post"===l&&n.setRequestHeader("User-Agent","XMLHTTP/1.0");n.setRequestHeader("X-Requested-With","XMLHttpRequest");n.setRequestHeader("Content-type","application/x-www-form-urlencoded");
n.onreadystatechange=function(){3<n.readyState&&(200===n.status?f&&f(S(l,n)):m&&m(S(l,n)))};n.send(e)};v={get:function(){n("GET",a,e,f,h)},post:function(){n("POST",a,e,f,h)},put:function(){n("PUT",a,e,f,h)},"delete":function(){n("DELETE",a,f,h)}};return v[d]()};$.noClash=function(){window.$===r&&(window.$=y);window.meta===r&&(window.meta=C);if(r)return r};$.is=function(d,a,e){if(null!==a&&void 0!==a)return v={ancestor:function(){if("compareDocumentPosition"in k.documentElement)return 16==(a.compareDocumentPosition(e)&
16);a=a==k||a==window?k.documentElement:a;return a!==element&&a.contains(e)},nodeList:function(){return"[object NodeList]"==a?!0:!1},match:function(){return a.matches(void 0)||a.matchesSelector(void 0)||a.webkitMatchesSelector(void 0)||a.mozMatchesSelector(void 0)||a.msMatchesSelector(void 0)||a.oMatchesSelector(void 0)},email:function(){return a.substring&&a.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/ig)},telephone:function(){a=a.replace(/\D/g,"");return a.substring&&(10===a.length||7===a.length)},
url:function(){Q=new RegExp(/^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\u00e2\u20ac\u0152\u00e2\u20ac\u2039\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[\u00e2\u20ac\u0152\u00e2\u20ac\u20396-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1\u00e2\u20ac\u0152\u00e2\u20ac\u2039,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00\u00e2\u20ac\u0152\u00e2\u20ac\u2039a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u\u00e2\u20ac\u0152\u00e2\u20ac\u203900a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i);
return a.substring&&a.match(Q)},object:function(){return a instanceof Object},mobile:function(){return/Nexus|Android|Playbook|Silk|AppleWebKit|Mobile|Tablet|webOS|iPhone|iPad|iPod|Kindle|Zune|Windows Phone|BlackBerry|IEMobile|Blazer|Symbian|Compal|Elaine|Fennec|Hiptop|Opera Mini|Meego|Avantgo|Bada|Compal|Iris|Kindle|Lge|Maemo|Midp|Mmp|Metfront|Palm|Plucker|Pocket|Psp|Symbian|Treo|Link|Vodafone|Wap/i.test(T.userAgent)},touch:function(){return k.createEvent("TouchEvent")},landscape:function(){return 90===
window.orientation||-90===window.orientation},portrait:function(){return 9===window.orientation},"boolean":function(){return"boolean"===typeof a},number:function(){return"number"===typeof a},integer:function(){return"number"===typeof a&&a===+a&&a===(a|0)},"float":function(){return"number"===typeof a&&a===+a&&a!==(a|0)},"function":function(){return"function"===typeof a},array:function(){return a instanceof Array},date:function(){return a instanceof Date},element:function(){return 1===a.nodeType},node:function(){var d;
return a&&"object"===typeof a&&(d=a.nodeType)&&(1==d||9==d)},document:function(){return 9===a.nodeType},window:function(){return a===a.window},string:function(){return a.substring},plainObject:function(){return a instanceof Object&&a!==a.window&&Object.getPrototypeOf(a)===Object.prototype},likeArray:function(){return"object"===typeof a&&isFinite(a.length)},pseudoElement:function(){return a.match(/[:]{1,2}(?:first\-(letter|line)|before|after|selection|value|choices|repeat\-(item|index)|outside|alternate|(line\-)?marker|slot\([_a-z0-9\-\+\.\\]*\))/i)},
pseudoElements:function(){return a.match(/([:]{1,2}(?:first\-(letter|line)|before|after|selection|value|choices|repeat\-(item|index)|outside|alternate|(line\-)?marker|slot\([_a-z0-9\-\+\.\\]*\)))/ig)},pseudoClasses:function(){return a.match(/([:](?:(link|visited|active|hover|focus|lang|context|empty|selector|enabled|disabled|checked|default|valid|invalid|required|optional)|((in|out\-of)\-range)|(read\-(only|write))|(first|last|only|nth)(\-last)?\-(child|of\-type))(?:\([_a-z0-9\-\+\.\\]*\))?)/ig)},
qsa:function(){return!($.is("tag",a)||$.is("id",a)||$.is("class",a))},attribute:function(){return a.match(/(\[\s*[_a-z0-9-:\.\|\\]+\s*(?:[~\|\*\^\$]?=\s*[\"\'][^\"\']*[\"\'])?\s*\])/ig)},id:function(){return a.match(/^#((?:\\.|[\w-]|[^\x00-\xa0])+)/)},"class":function(){J=/^\.((?:\\.|[\w-]|[^\x00-\xa0])+)/;return a.match(J)},importantRule:function(){return a.match(/\!\s*important\s*$/i)},complexString:function(){return a.match(/[\s\\<\>\+\~\,\-\:\^\[\]\@\%\=\!\{\}\*\$\\\&\?\/]/)},tag:function(){return!(k.createElement(a)instanceof
HTMLUnknownElement)},json:function(){try{JSON.parse(a.responseText)}catch(d){return!1}},event:function(){var a={};return function(d){var e={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img",unload:"win",resize:"win"},m=d.replace(/^on/,"");if(a[m])return a[m];e="win"==e[m]?window:k.createElement(e[m]||"div");d="on"+m;var n=d in e;n||(e.setAttribute(d,"return;"),n="function"==typeof e[d]);return a[m]=n}}},v[d]()};var x={};$.interval=function(d,a,e,f,h,l){var g=
Date.now()||(new Date).getTime(),n=!1;if(-1<d.indexOf("+:"))d=d.replace("+:","","gi");else if(-1<d.indexOf("x:"))n=!0,d=d.replace("x:","","gi");else if(-1<d.indexOf("?:")){if(x[d])return!0}else return;"wait"===h&&(l=h,h=void 0);"number"===typeof d&&(l=h,h=f,f=e,e=a,a=d);"function"===typeof e&&(l=h,h=f,f=e,e="loop");if(null===e||0===e)e="loop";if("now"===d)return Date.now()||(new Date).getTime();var k=0,p=a,q=0,r=0,t=function(){k++;q=Date.now()-g-r;k*a>Date.now()-g&&(q=k*a-r);if(k===e&&"undefined"!==
typeof h)return h();k>e||(L=q-a,k>e&&"loop"!==e||(f(),p=a-L,M=Math.abs(p-a),r+=q,p-=Math.round(M),d.substring?x[d]=window.setTimeout(t,p):window.setTimeout(t,p)))};x[d]||x[d]&&!0===n?!0===n&&(clearTimeout(x[d]),delete x[d]):"wait"===l?(window.setTimeout(t,a),l=null):t()};var z={};$.frame=function(d,a){for(var e=0,f=["ms","moz","webkit","o"],h=0;h<f.length&&!window.requestAnimationFrame;++h)window.requestAnimationFrame=window[f[h]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[f[h]+"CancelAnimationFrame"]||
window[f[h]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a,d){var f=Date.now()||(new Date).getTime(),h=Math.max(0,16-(f-e)),g=window.setTimeout(function(){a(f+h)},h);e=f+h;return g});window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)});if(-1<d.indexOf("+:"))d=d.replace("+:","","gi"),G=function(){a();z[d]=requestAnimationFrame(G)},z[d]||G();else if(-1<d.indexOf("x:"))d=d.replace("x:","","gi"),window.cancelAnimationFrame(z[d]),
delete z[d];else if(-1<d.indexOf("?:")&&z[name])return!0};$.cache=function(d,a){-1<d.indexOf("+:")||-1<d.indexOf("x:")||-1<d.indexOf("@:")||-1<d.indexOf("!:")>-1?(p=d.split(":"),t=p[0],d=p[1]):t="+";v={"+":function(){window.localStorage[d]=a},x:function(){return delete window.localStorage[d]},"@":function(){return window.localStorage[d]},"!":function(){return window.localStorage.clear()}};return v[t]()};$.text=function(d,a,e,f){v={trim:function(){return a.replace(/^\s+|\s+$/g,"")},trimLeft:function(){return a.replace(/^\s+/,
"")},trimRight:function(){return a.replace(/\s+$/,"")},alpha:function(){return a.toLowerCase().replace(/[^a-z]/g,"")},numeric:function(){return a.replace(/\D/g,"")},alphaNumeric:function(){return a.toLowerCase().replace(/[^a-z,0-9,-]/g,"")},clip:function(){if("number"!==typeof f||f!==+f||f!==(f|0))f=0;a.length>e&&(a=a.substring(f,e));return a},join:function(){return a+=e},camelCase:function(){return a.replace(/(?:^|[-])(\w)/g,function(a){return a?a.toUpperCase():""})},list:function(){O=a;P=e;return p=
O.join(P)}};return v[d]()};$.list=function(d,a,e,f){if("nodeList"===d)return Array.prototype.slice.call(a);if("unique"===d){var h=[],g;d=0;a:for(;d<a.length;d++){for(g=0;g<h.length;g++)if(h[g]===a[d])continue a;h[h.length]=a[d]}return h}if("flatten"===d){h=[];d=0;for(g=a.length;d<g;++d)"object"===typeof a[d]&&isFinite(a[d].length)?h=h.concat(a[d]):h[h.length]=a[d];return h}v={"+":function(){for(var d=0;d<e.length;)a.push(e[d]),d++},x:function(){var d=0,f=0;for(!1===e instanceof Array&&(e=[e]);f<e.length;){for(;d<
a.length;)a[d]===e[f]?a.splice(d,1):d++;f++}},"@":function(){var d=0,f=0,g=[];if(!1===e instanceof Array)return a[e];for(;f<e.length;){for(;d<a.length;)a[d]===e[f]?g[d]=a[d]:d++;f++}return g},"!":function(){for(;0<a.length;)a.pop()},"?":function(){for(var d=a.length;d--;)if(a[d]===e)return!0;return!1},text:function(){R=a;null===e&&(e=",");var d=R.split(e);if("interger"===f){H=d;for(var d=[],g=H.length-1;0<=g;g--)d.push(parseInt(H[g]))}return d},shuffle:function(){for(var d,e,f=a.length;f;d=parseInt(Math.random()*
f),e=a[--f],a[f]=a[d],a[d]=e);return a}};return v[d]()};$.id=function(d){return this(k.getElementById(d))};$.tag=function(d){return this(k.getElementsByTagName(d))};$["class"]=function(d){return this(k.getElementsByClassName(d))};(function(d){K=$.is("event","DOMSubtreeModified");D?(N=new D(function(a){a=a||window.event;a.some(function(d){0!==Object.keys(u).length&&(u={});return a})}),N.observe(k,{attributes:!1,childList:!0,characterData:!1,subtree:!0})):K&&k.addEventListener("DOMSubtreeModified",
function(a){a=a||window.event;0!==Object.keys(u).length&&(u={});return a},0)})()});
</script<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
jQuery('#text').html('The text is changed').css({
        backgroundColor: 'red',
        color: 'yellow'
});
ready
Javascript
var text = document.getElementById('text');
text.innerHTML = 'The text is changed';
text.style.backgroundColor = 'red';
text.style.color = 'yellow';
ready
Mootools
document.id('text').set('html','The text is changed').setStyles({
        'background-color': 'red',
        'color': 'yellow'
});
ready
Meta JS
meta('#text').dom('+:html','The text is changed').dom('+:css', {
        backgroundColor: 'red',
        color: 'yellow'
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.