jQuery vs JavaScript Performance Comparison

JavaScript performance comparison

Revision 133 of this test case created by

Preparation code

<div data-hello="hi"></div>
<div class="bye"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//begin $ definition
_=function(str){
    var els=[];
    if (typeof str==="string") {
        str=[str];
    }
    for (var i=0,mi=str.length;i<mi;i++){
        var match=str[i].match(/\.(\w+)$/);
        els=[].concat.apply(els,[].slice.call(match?document.getElementsByClassName(match[1]):document.querySelectorAll(str[i])));
    }
    els.hide = function(){
        for (var i=0,mi=this.length;i<mi;i++){
            this[i].style.display = 'none';
        }
    };
    els.show = function(){
        for (var i=0,mi=this.length;i<mi;i++){
            this[i].style.display = '';
        }
    };
    els.fadeIn = function(){
        for (var i=0,mi=this.length;i<mi;i++){
            this[i].classList.add('show');
            this[i].classList.remove('hide');
        }
    };
    //add class or array of classes | fix: use shadowdom
    els.addClass = function(str){
        if (typeof str === "string"){str=[str]}
        for (var i=0,mi=this.length;i<mi;i++){
            for (var j=0,mj=str.length;j<mj;j++) {
                this[i].classList.add(str[j]);
            }
        }
    };
    els.after = function(str){
        for (var i=0,mi=this.length;i<mi;i++){
            this.insertAdjacentHTML('afterend', str);
        }
    };
    els.append = function(str){
        for (var i=0,mi=this.length;i<mi;i++){
            this.insertAdjacentHTML('afterend', str);
        }
    };
    els.after = function(str){
        for (var i=0,mi=this.length;i<mi;i++){
            this.insertAdjacentHTML('afterend', str);
        }
    };
    return els;
};
//begin css injection
(function(){
    _('head').after('<style>.show{transition:opacity 400ms}.hide{opacity:0}</style>')
})();
</script>
    

Preparation code output

<div data-hello="hi"></div> <div class="bye"></div> <script> //begin $ definition _=function(str){ var els=[]; if (typeof str==="string") { str=[str]; } for (var i=0,mi=str.length;i<mi;i++){ var match=str[i].match(/\.(\w+)$/); els=[].concat.apply(els,[].slice.call(match?document.getElementsByClassName(match[1]):document.querySelectorAll(str[i]))); } els.hide = function(){ for (var i=0,mi=this.length;i<mi;i++){ this[i].style.display = 'none'; } }; els.show = function(){ for (var i=0,mi=this.length;i<mi;i++){ this[i].style.display = ''; } }; els.fadeIn = function(){ for (var i=0,mi=this.length;i<mi;i++){ this[i].classList.add('show'); this[i].classList.remove('hide'); } }; //add class or array of classes | fix: use shadowdom els.addClass = function(str){ if (typeof str === "string"){str=[str]} for (var i=0,mi=this.length;i<mi;i++){ for (var j=0,mj=str.length;j<mj;j++) { this[i].classList.add(str[j]); } } }; els.after = function(str){ for (var i=0,mi=this.length;i<mi;i++){ this.insertAdjacentHTML('afterend', str); } }; els.append = function(str){ for (var i=0,mi=this.length;i<mi;i++){ this.insertAdjacentHTML('afterend', str); } }; els.after = function(str){ for (var i=0,mi=this.length;i<mi;i++){ this.insertAdjacentHTML('afterend', str); } }; return els; }; //begin css injection (function(){ _('head').after('<style>.show{transition:opacity 400ms}.hide{opacity:0}</style>') })(); </script>

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

Revisions

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

0 Comments