jQuery vs JavaScript Performance Comparison

JavaScript performance comparison

Revision 132 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") {
        var match=str.match(/\.(\w+)$/);
        if (match){
            els = document.getElementsByClassName(match[1]);
        }else {
            els = document.querySelectorAll(str);
        }
    }
    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") { var match=str.match(/\.(\w+)$/); if (match){ els = document.getElementsByClassName(match[1]); }else { els = document.querySelectorAll(str); } } 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
_: $clone attr selector
var $el = _('[data-hello]');
pending…
_: $clone class selector
var $el = _('.bye');
pending…

Revisions

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

0 Comments