test-hide

JavaScript performance comparison

Test case created by Levi Durfee

Preparation code

<div id="test">hello</div>
<div class="test">test1 of test class</div>
<div class="test">test2 of test class</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var lol = (function () {
    function lol(sel) {
        this.el = document.querySelectorAll(sel);
        return this;
    }
    lol.prototype.hide = function () {
        for (var i = 0; i < this.el.length; i++) {
            this.el[i].style.display = 'none';
        }
        return this;
    };
    lol.prototype.show = function () {
        for (var i = 0; i < this.el.length; i++) {
            this.el[i].style.display = '';
        }
        return this;
    };
    lol.e = function (sel) {
        return new lol(sel);
    };
    return lol;
}());
</script>

    

Preparation code output

<div id="test">hello</div> <div class="test">test1 of test class</div> <div class="test">test2 of test class</div> <script> var lol = (function () { function lol(sel) { this.el = document.querySelectorAll(sel); return this; } lol.prototype.hide = function () { for (var i = 0; i < this.el.length; i++) { this.el[i].style.display = 'none'; } return this; }; lol.prototype.show = function () { for (var i = 0; i < this.el.length; i++) { this.el[i].style.display = ''; } return this; }; lol.e = function (sel) { return new lol(sel); }; return lol; }()); </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
jquery
$(".test").hide().show().hide();
pending…
javascript
lol.e(".test").hide().show().hide();
pending…

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

0 Comments

hello
test1 of test class
test2 of test class