better-dom vs jquery: classes manipulation

Benchmark created by Maksim Chemerisuk on

Description

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

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//rawgithub.com/chemerisuk/better-dom/v1.6.0/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>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery#addClass
jquerySandbox.addClass("a" + new Date().getTime());
nativeSandbox.className = "";
ready
DOM#addClass
domSandbox.addClass("a" + new Date().getTime());
nativeSandbox.className = "";
ready
jquery#addClasses
jquerySandbox.addClass("a" + new Date().getTime() + " b" + new Date().getTime() + " c" + new Date().getTime() + " d" + new Date().getTime());
nativeSandbox.className = "";
ready
DOM#addClasses
domSandbox.addClass("a" + new Date().getTime(), "b" + new Date().getTime(), "c" + new Date().getTime(), "d" + new Date().getTime());
nativeSandbox.className = "";
ready
jquery#toggleClass
jquerySandbox.toggleClass(className);
ready
DOM#toggleClass
domSandbox.toggleClass(className);
ready

Revisions

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

  • Revision 1: published by Maksim Chemerisuk on
  • Revision 2: published on
  • Revision 3: published by Maksim Chemerisuk on
  • Revision 5: published on
  • Revision 6: published by Maksim Chemerisuk on