jQuery vs JavaScript Performance Comparison

JavaScript performance comparison

Revision 143 of this test case created by Matthias Weiß

Preparation code

<div id="hello"></div>
<div class="bye"></div>
<form>
 <input class="input" type="text" value="input 1">
 <input class="input" type="text" value="input 2">
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  !function(e,t){function n(){var e="undefined"!=typeof HTMLElement?HTMLElement.prototype:"undefined"!=typeof Element?Element.prototype:null;null!==e&&(e.removeClass=function(e){var t,n="",o=this.className.split(" ");for(t=0;t<o.length;t++)o[t]!==e&&(n+=o[t]+" ");this.className=n.trim()},e.addClass=function(e){-1===this.className.indexOf(e)&&(this.className=this.className+" "+e)},e.toggleClass=function(e){-1===this.className.indexOf(e)?this.addClass(e):this.removeClass(e)},e.hasClass=function(e){return-1!==this.className.indexOf(e)})}function o(e,t,n,o){var i,r;if("object"==typeof e&&(n=e.data||"",o=e.method||"GET",t=e.callback||void 0,i=e.errorCallback||void 0,r=e.headers||void 0,e=e.url||void 0),void 0===e||void 0===t)return!1;if("undefined"!=typeof nativeOS)return t(nativeOS.ajax(JSON.stringify({data:n,method:o,headers:r,url:e}))),!0;var s=null;if(window.XMLHttpRequest?s=new XMLHttpRequest:window.ActiveXObject&&(s=new ActiveXObject("Microsoft.XMLHTTP")),null!==s){if(s.onload=function(e){4!==s.readyState||200!==s.status&&201!==s.status?"function"==typeof i&&i(s):t(s.responseText)},void 0===n&&(n=""),"GET"!==o&&"POST"!==o&&(o="GET"),"object"==typeof n){var a=n;n="";for(var l in a)n=n+"&"+l+"="+encodeURIComponent(a[l])}if("POST"===o||"PUT"===o||"DELETE"===o){if(s.open(o,e,!0),s.setRequestHeader("Content-type","application/x-www-form-urlencoded"),"object"==typeof r)for(var d in r)s.setRequestHeader(d,r[d]);s.send(n)}else{if(""!==n&&(n="?"+n),s.open("GET",e+n,!0),"object"==typeof r)for(var d in r)s.setRequestHeader(d,r[d]);s.send()}return!0}return!1}function i(e){var t,n=0;if(0===e.length)return n;for(t=0;t<e.length;t++)n=(n<<5)-n+e.charCodeAt(t),n|=0;return n}function r(e,t,n,o){if(void 0===t||void 0===e)return!1;var r=document.querySelector("#smdQS"+i(t));if(null!==r&&!0===o&&(r.parentNode.removeChild(r),r=null),null===r){var s=null,a=null;switch(e){case"javascript":s=window.document.getElementsByTagName("script")[0],(a=window.document.createElement("script")).src=t,a.async=!0,a.id="smdQS"+i(t);break;case"stylesheet":s=window.document.getElementsByTagName("link")[0],(a=window.document.createElement("link")).href=t,a.type="text/css",a.rel="stylesheet",a.id="smdQS"+i(t)}if(null===a)return!1;n&&"function"==typeof n&&(a.onload=n),null===s?window.document.querySelector("head").appendChild(a):s.parentNode.insertBefore(a,s)}else"function"==typeof n&&n()}function s(e,t,n){return r("javascript",e,t,n)}function a(e,t,n){return r("stylesheet",e,t,n)}function l(e,t){v?setTimeout(function(){e(t)},1):(m.push({fn:e,ctx:t}),"complete"===document.readyState?setTimeout(d,1):p||(document.addEventListener?(document.addEventListener("DOMContentLoaded",d,!1),window.addEventListener("load",d,!1)):(document.attachEvent("onreadystatechange",u),window.attachEvent("onload",d)),p=!0))}function d(){if(!v){v=!0;for(var e=0;e<m.length;e++)m[e].fn.call(window,m[e].ctx);m=[]}}function u(){"complete"===document.readyState&&d()}function c(e,t,n){t&&void 0!==t&&void 0!==t.querySelectorAll||(t=document);var o,i=!0;if("#"===e.substr(0,1)&&-1===e.indexOf(" ")&&-1===e.indexOf(".")?(i=!1,o=t.getElementById(e.substr(1))):o=t.querySelectorAll(e),"object"==typeof o&&null!==o)if(n.isList=!1,i)if(1===o.length)n=o[0];else if(o.length>0){var r={};r.items=o,r.forEach=function(e,t){for(var n=0;n<this.items.length;n++)e.call(t,n,this.items[n])},(n=r).isList=!0}else n=null;else n=o;else n=null;return n}e=e||"smdQS";var f=!1,m=[],v=!1,p=!1;(t=t||window)[e]=function(e,t){var i={};return f||(n(),f=!0),""!==e&&null!==e&&"string"==typeof e&&(i=c(e,t,i)),null!==i&&(i.ajax=o,i.requireJS=s,i.requireCSS=a,i.ready=l),i}}("smdQS",window);

};
</script>

Preparation code output

<div id="hello"></div> <div class="bye"></div> <form> <input class="input" type="text" value="input 1"> <input class="input" type="text" value="input 2"> </form>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Javascript Class Selector
var $el = document.getElementsByClassName('input');
pending…

Revisions

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

0 Comments