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>

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