better-dom vs jquery: classes manipulation

JavaScript performance comparison

Revision 6 of this test case created by Maksim Chemerisuk

Info

Compare performance of the better-dom library and jquery in typical cases

Preparation code

<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<script src="//rawgithub.com/chemerisuk/better-dom/v1.7.1/dist/better-dom.js"></script>
<script>
var nativeSandbox = document.createElement("div"),
    jquerySandbox = $(nativeSandbox),
    domSandbox = DOM.create(nativeSandbox),
    className = "t" + new Date().getTime();

document.body.appendChild(nativeSandbox);
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jquery#addClass
jquerySandbox.addClass("x" + new Date().getTime());
nativeSandbox.className = "";
pending…
DOM#addClass
domSandbox.addClass("x" + new Date().getTime());
nativeSandbox.className = "";
pending…
jquery#addClasses
jquerySandbox.addClass("a" + new Date().getTime() + " b" + new Date().getTime() + " c" + new Date().getTime() + " d" + new Date().getTime());
nativeSandbox.className = "";
pending…
DOM#addClasses
domSandbox.addClass("a" + new Date().getTime(), "b" + new Date().getTime(), "c" + new Date().getTime(), "d" + new Date().getTime());
nativeSandbox.className = "";
pending…
jquery#toggleClass
jquerySandbox.toggleClass(className);
pending…
DOM#toggleClass
domSandbox.toggleClass(className);
pending…
jquery#hasClass
jquerySandbox.hasClass(className);

nativeSandbox.className = new Date().getTime() % 2 ? className : "";
pending…
DOM#hasClass
domSandbox.hasClass(className);

nativeSandbox.className = new Date().getTime() % 2 ? className : "";
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment